我们在浏览别人博客的时候，有时候文章或者很长，拉到底下的时候想点其他页面还点拉到最上面。就想着能不能修改一下，提高一下用户体验度。前些天在 夜央的博客看到他写了一篇这样的教程，马上着手用上他分享的代码。效果是有，但是显的有些生硬。当往下拉到侧栏没有的时候，会突然出现一个模块，视觉过程 不太友好。于是就放弃了，另觅他法。

百度谷歌上搜索了半天，找到了现在这个代码，效果可随便开一篇比较长的文章看。我把随机文章放在小工具的最后一个，当下拉时浏览器碰到随机文章的上边时，会把随机文章往下顶。

代码如下:

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文件里即可。

还有另外一种漂浮的效果,代码如下:

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
});
}
});

});

添加方法和上一个代码一样，这个效果还不错，但是如果页面加载的东西多的话会有卡的感觉。