网站页面的侧栏不但填充了边缘的空白区域,同时可以通过小工具展现一些内容对于来访者也更加友好,但是很多时候侧栏位置都固定不变,对于较长的文章或者页面来说,滑动到底部区域,侧栏工具就滑动到了上方,侧栏将会呈现空白状态,很是不友好,也很难看。
当然很多插件可以实现这个功能(比如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哦