好的用户体验要体现在每一个细节，当你在浏览别人博客，文章很长的时候，拉到最下面发现边栏空空的什么也没有。这时，我们可以通过代码来实现，某个小工具浮动跟随的效果，来提高网站的用户体验度。

代码如下：

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

});