jQuery實現頁面滾動時元素智能定位

本文將以淘寶網商品詳情的簡易導航爲例，和你們一塊兒分享經過jQuery和CSS實現頁面元素（要浮動的層）智能定位的效果。

查看演示DEMO 下載源碼

實現過程

Js偵聽滾動事件，當頁面滾動的距離（頁面滾動的高度）超出了對象（要滾動的層）距離頁面頂部的高度，即要滾動的層到達了瀏覽器窗口上邊緣時，當即 將對象定位屬性position值改爲fixed（固定）。同時爲了有個好點的體驗效果，能夠將對象的樣式設置陰影效果以便更好的區分浮動層與頁面內容主 體。

這裏須要注意的是，老前輩IE6不支持fixed，那就只能使用absolute來代替，可是這樣會有一個問題，將會致使在IE6下看不到平滑效 果。咱們能夠經過window.XMLHttpRequest來判斷是否爲IE6，由於除IE6及更低版本IE瀏覽器外，其餘現代瀏覽器都支持 window.XMLHttpRequest。還有就是本例中咱們用css3來製造陰影效果，爲了兼容IE6-IE8，你也可使用圖片來設置陰影效果。

HTML

咱們仿淘寶網的商品詳情頁面，創建一個簡易的導航條。

<div id="nav"> 
    <ul> 
        <li><a href="#">寶貝詳情</a></li> 
        <li class="cur"><a href="#">評價詳情（123）</a></li> 
        <li><a href="#">成交記錄（68件）</a></li> 
    </ul> 
</div> 

爲了達到滾動效果，咱們應該在頁面中放置一些其餘的元素或者設置body的高度，將頁面高度撐起來。

CSS

咱們運用css3，將導航條包裝的稍顯正規點，固然你也能夠發揮你的美工特長，讓它不那麼土。注意咱們使用了陰影效果的樣式.shadow，用來動態的將效果賦給浮動的對象。

#nav{width:720px; height:42px; position:absolute; margin-left:20px; border:1px solid #d3d3d3;  
background:#f7f7f7;-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } 
#nav li{float:left; height:42px; line-height:42px; padding:0 10px; border-right: 
1px solid #d3d3d3; font-size:14px; font-weight:bold} 
#nav li.cur{background:#f1f1f1; border-top:1px solid #f60} 
#nav li a{text-decoration:none;} 
#nav li.cur a{color:#333} 
#nav li a:hover{color:#f30} 
.shadow{-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px  
rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);} 

jQuery

本例中依賴jQuery庫，因此必須先引入jQuery庫文件。接着，咱們按實現流程完成智能定位效果，請看代碼及註釋。

$.fn.smartFloat = function() { 
    var position = function(element) { 
        var top = element.position().top; //當前元素對象element距離瀏覽器上邊緣的距離 
        var pos = element.css("position"); //當前元素距離頁面document頂部的距離 
        $(window).scroll(function() { //偵聽滾動時 
            var scrolls = $(this).scrollTop(); 
            if (scrolls > top) { //若是滾動到頁面超出了當前元素element的相對頁面頂部的高度 
                if (window.XMLHttpRequest) { //若是不是ie6 
                    element.css({ //設置css 
                        position: "fixed", //固定定位,即再也不跟隨滾動 
                        top: 0 //距離頁面頂部爲0 
                    }).addClass("shadow"); //加上陰影樣式.shadow 
                } else { //若是是ie6 
                    element.css({ 
                        top: scrolls  //與頁面頂部距離 
                    });     
                } 
            }else { 
                element.css({ //若是當前元素element未滾動到瀏覽器上邊緣，則使用默認樣式 
                    position: pos, 
                    top: top 
                }).removeClass("shadow");//移除陰影樣式.shadow 
            } 
        }); 
    }; 
    return $(this).each(function() { 
        position($(this));                          
    }); 
}; 

最後，咱們調用以上效果：

$(function(){ 
    $("#nav").smartFloat(); 
}); 

大功告成，去看下效果吧： demo.