wordpress教程：小工具浮动跟随的效果

[tr][td]好的用户体验要体现在每一个细节，当你在浏览别人博客，文章很长的时候，拉到最下面发现边栏空空的什么也没有。这时，我们可以通过代码来实现，某个小工具浮动跟随的效果，来提高网站的用户体验度。
代码如下：
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();
 
});

可以参照最下面的注释，按照自己的需求进行修改。
还有另外一种漂浮的效果，代码如下
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
 });
 }
 });
 
});

</strong>
[/td][/tr]