jQuery固定浮動側邊欄(jQuery fixed Sidebar)

 　　這個功能現在應用的非常普遍，如果頁面比較高，當滾動條拖到頁面的下面的時候，側邊欄會出現一個固定跟隨浏覽器的DIV框，現思路是這樣的：首先獲取需要跟隨的DIV距離頁面頂部的距離，然後判斷，當浏覽器滾動的距離大於該DIV本身距離頂部距離的時候，則添加CSS屬性fixed即可。

　　這個功能現在應用的非常普遍，如果頁面比較高，當滾動條拖到頁面的下面的時候，側邊欄會出現一個固定跟隨浏覽器的DIV框，現思路是這樣的：首先獲取需要跟隨的DIV距離頁面頂部的距離，然後判斷，當浏覽器滾動的距離大於該DIV本身距離頂部距離的時候，則添加CSS屬性fixed即可。

 代碼如下  

HTML代碼：

<div id="header">header</div>
<div id="sidebarWrap">
<div id="sidebar">Sidebar</div>
</div>
<div id="main">Main</div>
<div id="footer">footer</div>

CSS代碼：
body {
    margin: 10px auto;
    font-family: sans-serif;
    width: 500px;
}
div {
    border-radius: 5px;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
    border: 1px solid #ccc;
    padding: 5px;
}
#sidebarWrap {
    height: 400px;
    width: 210px;
    float: right;
    position: relative;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
}
#main {
    width: 270px;
    height: 4000px;
}
#footer {
    clear: both;
    margin: 10px 0;
}
#sidebar {
    width: 200px;
    height: 300px;
    position: absolute;
}
#header {
    height: 200px;
    margin-bottom: 10px;
}
#sidebar.fixed {
    position: fixed;
    top: 0;
}
#footer { height: 600px; }
#footer { height: 600px; }

JavaScript代碼：

$(function() {
    var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
    var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

    var maxY = footTop - $('#sidebar').outerHeight();

    $(window).scroll(function(evt) {
        var y = $(this).scrollTop();
        if (y > top) {
            if (y < maxY) {
                $('#sidebar').addClass('fixed').removeAttr('style');
            } else {
                $('#sidebar').removeClass('fixed').css({
                    position: 'absolute',
                    top: (maxY - top) + 'px'
                });
            }
        } else {
            $('#sidebar').removeClass('fixed');
        }
    });
});