jquery實作div層隨頁面滾動而滾動

翻看ipc.me時覺得右側的slider會隨著頁面下翻而始終浮動在窗口邊緣下，體驗很不錯，在張鑫旭的博客中一篇文章的借鑒下，成功實現這樣一個功能，代碼如下（基於jquery實現，所以事先要在頁面中導入jquery文件）：

<script type="text/javascript">
$.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").smartFloat();
</script>

當然是在chrome下，IE沒有測試，應該也是可以的，實現的原理如下（最好是看一下，了解原理，就站在了製高點看問題，一覽眾山小）：

預設狀態就是預設狀態，什麼事情也不用做，定位是absolute也好，static也好，都ok。關鍵是當瀏覽器滾動的時候，物件（要浮動的層）要移除瀏覽器介面視區的時候，修改其position屬性，讓其浮動在視窗的上緣顯示就可以了。最好的position屬性就是fixed了，可以在IE6+和其他瀏覽器下浮動層平滑固定定位，由於IE6前輩不支援fixed屬性，所以，後退一步，使用absolute屬性代替，但是會有副作用－滾動不平滑。但，這也是沒有辦法的事情了。

現在關鍵就是如何判斷目前層與瀏覽器視窗的上緣接觸呢？當浮動層與瀏覽器視窗上邊緣接觸的一瞬間，其頁面垂直偏移值與頁面的滾動高度其實是一致的，所以，用這個進行判斷就OK了，但是，如何獲得頁面上元素距離頁面的垂直距離呢？純粹的js程式碼取得此值還是比較麻煩的，好在JavaScript函式庫jQuery幫我們解決了這些工作。