wordpress悬浮小工具源码_wordpress教程_php教程

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的最后：

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悬浮小工具插件

希望本文对你有所帮助！

(责任编辑：最模板)