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

希望本文对你有所帮助！