网站页面的侧栏不但填充了边缘的空白区域，同时可以通过小工具展现一些内容对于来访者也更加友好，但是很多时候侧栏位置都固定不变，对于较长的文章或者页面来说，滑动到底部区域，侧栏工具就滑动到了上方，侧栏将会呈现空白状态，很是不友好，也很难看。
当然很多插件可以实现这个功能（比如Q2W3 Fixed Widget），但是本着无插件万岁的原则，国庆有空捣鼓了下网站主题，实现了 侧栏 跟随固定浮动效果（可以选择想要跟随的小插件），基本实现了Q2W3 Fixed Widget插件的功能
不多说先上代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<script type="text/javascript"> jQuery(document).ready(function($){ //得到侧边栏的起始高度，整个侧边栏的长度， //index获取想要固定的工具中最上方工具的高度，便于等下固定时定位 var topindex = $("body").find("#sidebar").position().top; var heightindex = document.getElementById("sidebar").offsetHeight; var index = $("body").find(".widgit-area").eq(2).position().top; $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"),heighter,isfadein = false; $(window).scroll(function() { var scrolls = $(this).scrollTop(); //滑动长度超过原来的侧栏长度，固定浮动效果的工具栏fadein出现 if (scrolls > topindex+heightindex+50) { if(isfadein == false){ element.css({display:"none"}); element.fadeIn(1000); isfadein = true; } //这儿的css属性以各自的主题为准，下面的也一样 //设置css属性，固定位置，最后的宽度以自己的主题为准 if (window.XMLHttpRequest) { element.css({position: "fixed",top: heighter-index +60,width:270,}); }else { element.css({top: scrolls}); } }else { if(isfadein == true){ isfadein=false; } heighter = top; element.removeAttr("style"); element.css({top: top}); } }); }; return $(this).each(function() {position($(this));}); }; //得到想要实现固定浮动效果的工具栏，并调用smartFloat函数，由于这儿有同名的用了eq(),精确确定 $("body").find(".widgit-area").eq(2).smartFloat(); $("body").find(".widgit-area").eq(3).smartFloat(); }); ////注：这个代码仅适用与lopor主题，其他的代码，需要自己查看边栏工具的 id 名或者 class 名，手动替换 </script> |
代码直接放在主题文件的footer.php对应位置就可以了
说明一下，这个代码的针对性较强，这儿的代码仅仅适用与loper主题，其他主题的话不适合小白操作，里面的id/class名，以及设置的css属性的宽度和排版位置需要查看自己主题的侧栏的属性手动设置，相当于这儿提供了一个模板，加了注释的地方都需要自己仔细对照主题修改一下
懒得折腾的可以区后台搜索Q2W3 Fixed Widget插件安装，启用后，所有小工具都会有一的Fixed Weight选项，勾选上就可以实现相同的效果，插件用法可以参考这儿wordpress大学
图片演示
如上图所示具体效果的话博主的侧栏就是一个很好的Demo哦 
