WordPress侧栏浮动跟随效果
- 发表于
- WordPress
我们在浏览别人博客的时候,有时候文章或者很长,拉到底下的时候想点其他页面还点拉到最上面。就想着能不能修改一下,提高一下用户体验度。前些天在夜央的博客看到他写了一篇这样的教程,马上着手用上他分享的代码。效果是有,但是显的有些生硬。当往下拉到侧栏没有的时候,会突然出现一个模块,视觉过程不太友好。于是就放弃了,另觅他法。
百度谷歌上搜索了半天,找到了现在这个代码,效果可随便开一篇比较长的文章看。我把随机文章放在小工具的最后一个,当下拉时浏览器碰到随机文章的上边时,会把随机文章往下顶。
浮动跟随代码如下
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 |
jQuery(document).ready(function($){ $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: "absolute", top: top }); } }); }; return $(this).each(function() { position($(this)); }); }; //绑定,将引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC" $(".widget_bd_random_post_widget").smartFloat(); }); |
按照31行的注释做相应的修改,然后将修改后的代码放到主题需要加载的JS文件里即可。
还有另外一种漂浮的效果
代码如下,效果可以点击看这里。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
jQuery(document).ready(function($){ //将下一行引号中的内容替换成你想要下拉的模块的ID或者CLASS名字,如"#ABC",".ABC" var $sidebar = $("#bd_random_post_widget-3"), $window = $(window), offset = $sidebar.offset(), topPadding = 50; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); }); |
添加方法和上一个代码一样,这个效果还不错,但是如果页面加载的东西多的话会有卡的感觉。
VIA: http://www.vsay.cn/for-wordpress-sidebar-gadget-to-increase-float-follow-effect.html