wordpress主题建站,选择WEB主题公园中文原创企业网站模板!

WordPress技术博客 news
您现在的位置:首页 > WordPress技术博客 > wordpress悬浮小工具源码

本周推荐网站模板

WordPress主题视频教程

最近更新的WordPress主题
最新更新过的网站模板

wordpress悬浮小工具源码

发布时间:2013/12/07 WordPress技术博客 wp应用技术 3887 2

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

这个效果在网上有很多人放出了源码,我们在测试时,也参考了其中的一些,但是可惜的是,这些源码在兼容性和显示方式,悬浮等方式并不是特别的理想,所以我们的前端工程师自己写了一段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悬浮小工具插件

希望本文对你有所帮助!

WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园

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

============关于WEB主题公园=============

WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!

分享WordPress开发,网站维护经验,分享更多有用的WordPress知识

WEB主题公园--做最好的中文原创WordPress主题,网站模版。

  1. _

    这个不错

    2014年4月28日 10:26 回复
  2. 易迅-曹哲(gerrycao)

    有木有demo啊?

    2013年12月7日 10:45 回复