新浪微博主頁側邊欄跟隨頁面滾動代碼

現在很多網站都有側欄跟隨的效果，如網站主體內容有兩欄或三欄的時候，當內容欄頁面很長，而側欄(左/右)太短空白，很不美觀。而使用側邊欄跟隨固定浮動的效果(常見有相關推薦、文章推薦、熱門文章、廣告推廣、左側導航欄等)，可提高網站閱讀量、文章的點擊率等。最常見的就是新浪微博主頁(https://weibo.com/)左右兩欄的固定跟隨滾動條(即左右側邊欄固定，中間頁面滾動)。

網頁側欄滾動到頁面頂端以后就固定在那個位置,不再跟隨滾動條而滾動。側欄與內容欄一樣長還好，過長可通過jQuery實現側邊欄跟隨瀏覽器滾動固定顯示。

1、javascript實現側邊欄固定中間內容滾動代碼，如下(添加到網站頭部或底部修改即可。為了減少js文件引用，也可以將它放到JS文件中)，這里只是設置單獨滾動某個模塊效果：

<script>
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選擇器名稱,如"#sidebar",".sidebar"
$(".lmlblog-member-left").smartFloat();
});
</script>

簡單實用的側邊欄懸浮特效代碼，效果顯示如新浪微博主頁、點擊瀏覽這里的[v_act]效果顯示[/v_act]
2、還有一種就是漂浮的效果，即側邊欄隨窗口滾動(滑動效果)

<script type="text/javascript">
jQuery(document).ready(function($){   
//將下面.lmlblog-member-left替換成你網站側欄模塊的id或者class選擇器名稱,如"#sidebar",".sidebar"   
    var $sidebar   = $(".lmlblog-member-left"),      
        $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      
            });      
        }      
    });      
      
});
</script>

側邊欄懸浮“滑動”[v_act]效果顯示[/v_act]

側邊欄跟隨頁面滾動實現的方法很多，這里介紹第一種側邊欄固定，中間滾動效果是比較常見的。

更多JS+CSS側邊欄跟隨瀏覽器滾動效果、jQuery實現側邊欄跟隨瀏覽器滾動顯示、jQuery左右側邊欄固定中間滾動代碼、側邊欄浮動jquery特效代碼，歡迎分享。