最近在更新官網的開發(fā)時，我們也注意到懸浮小工具的開發(fā)方式，即讓小工具滾動到超出窗口，增加顯示一個懸浮的模塊，讓超出之后的側邊欄，多出一個懸浮跟隨窗口滾動的小工具。

這個效果在網上有很多人放出了源碼，我們在測試時，也參考了其中的一些，但是可惜的是，這些源碼在兼容性和顯示方式，懸浮等方式并不是特別的理想，所以我們的前端工程師自己寫了一段jquery代碼，，比較靈活的實現了這一功能。

建立一個超出窗口跟隨的懸浮小工具

首先，我們需要建立一個自定義的小工具，自定義小工具不是新鮮事，我們提供一個自定義小工具的源代碼供您參考：cat_posts-news-fix

下載這段源碼，復制到functions.php，或者在functions.php中添加鏈接到這個文件 ? 加入以下代碼

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

這樣，你會發(fā)現在后臺會出現一個“懸浮側邊圖文分類模塊”，這個小工具可以自定義文章的分類和顯示的數量，你可以修改其中79到81行中的loop? 即 “?while ”到“?endwhile”中的代碼，加入特色圖片、截斷文字等，需要你自己去修改。

如果你的小工具有統(tǒng)一的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的高度???? 懸浮的小工具淡入顯示?? 如果不是則淡出顯示

這樣，不管小工具添加多少，高度有多少，只要小工具的底部超出了窗口，懸浮的模塊就能出現，并且跟隨窗口滾動了。

如果你需要開發(fā)一個這樣的小工具，可以參考這篇文章以及這篇文章附帶的文件和源碼，如果你不是一個開發(fā)者，可以使用插件來完成這個功能 ：wordpress懸浮小工具插件

希望本文對你有所幫助！