好的用户體驗要體現在每一個細節，當你在瀏覽別人博客，文章很長的時候，拉到最下面發現邊欄空空的什麼也沒有。這時，我們可以通過代碼來實現，某個小工具浮動跟隨的效果，來提高網站的用户體驗度。

代碼如下：

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

});