wordpress悬浮小工具源码

最近在更新官网的开发时,我们也注意到悬浮小工具的开发方式,即让小工具滚动到超出窗口,增加显示一个悬浮的模块,让超出之后的侧边栏,多出一个悬浮跟随窗口滚动的小工具。

这个效果在网上有很多人放出了源码,我们在测试时,也参考了其中的一些,但是可惜的是,这些源码在兼容性和显示方式,悬浮等方式并不是特别的理想,所以我们的前端工程师自己写了一段jquery代码,,比较灵活的实现了这一功能。

建立一个超出窗口跟随的悬浮小工具

首先,我们需要建立一个自定义的小工具,自定义小工具不是新鲜事,我们提供一个自定义小工具的源代码供您参考:cat_posts-news-fix

下载这段源码,复制到functions.php,或者在functions.php中添加链接到这个文件   加入以下代码

include_once("cat_posts-news-fix.php");

这样,你会发现在后台会出现一个“悬浮侧边图文分类模块”,这个小工具可以自定义文章的分类和显示的数量,你可以修改其中79到81行中的loop  即 “ while ”到“ endwhile”中的代码,加入特色图片、截断文字等,需要你自己去修改。

如果你的小工具有统一的css样式,这个小工具则会显示你的样式,你还需要将悬浮的代码加入你的css文件夹,默认的文件夹是   style.css   将以下css添加进入css文件夹最后一行。

#fix{ display:none; position:fixed; top:0;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop)); }

 

这样,小工具就能够悬浮了,你可以自己修改一下sidebar(小工具默认的id) 的ul、li和div.widget的样式。

下面我们将我们写的一段jquery代码放进你的js文件夹,如果没有,可以将以下代码放进footer.php的最后:

<script type="text/javascript">
if($(window).scrollTop() >= ($("#sidebar").offset().top + $(".right_mian").height())){
$("#fix").fadeIn("300");
}
else{
$("#fix").fadeOut("300");
}</script>

上面的代码很好理解   我们来梳理一下:

外层的html结构:  div .right_mian 是右侧栏目的最顶级div    ,div#sidebar在.right_mian里面,#sidebar是用来放置小工具的 ,我们添加进去的自定义小工具div#fix就是在这里面

第一句代码   如果窗口的滚动的高度    大于等于  小工具栏目的顶部距离整个网站顶部的距离   加上  右侧顶级div的高度     悬浮的小工具淡入显示   如果不是则淡出显示

这样,不管小工具添加多少,高度有多少,只要小工具的底部超出了窗口,悬浮的模块就能出现,并且跟随窗口滚动了。

如果你需要开发一个这样的小工具,可以参考这篇文章以及这篇文章附带的文件和源码,如果你不是一个开发者,可以使用插件来完成这个功能 :wordpress悬浮小工具插件

希望本文对你有所帮助!

上一篇:

下一篇:

如未标明出处,所有文章均为WEB主题公园原创,如需转载,请附上原文地址,感谢您的支持和关注。

本文地址:https://www.themepark.com.cn/wordpressxfxgjym.html

WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园
WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!

相关文章

文章评论

您好!请登录

取消回复

  1. _ 回复

    这个不错


  2. 易迅-曹哲(gerrycao) 回复

    有木有demo啊?


个人中心我的

联系我们x

联系我们,从qq在线客服,电话和邮件

售前客服-1[点击对话]

购买之前想要了解和咨询

售前客服-2[点击对话]

购买之前想要了解和咨询

售后客服[售后支持]

购买后输入订单号加好友

咨询热线:0731-8578 7193

联系邮箱:
info@themepark.com.cn

请注意:在线客服以及咨询热线请在 工作日的9:30~18:00来电咨询 电子邮件在任何时间都会回复

客服
回到顶部 顶部