下拉滾動，導覽列懸停在頂部

效果圖

以前總覺得這個效果很絢，但是寫不出來，最近出來實習了，老師教了這個效果，我給他貼出來，感覺很簡單。

說明

首先導覽列上邊的部分占150像素，導覽列本身40像素，首先得在css中定義一個class，這個class也就是定位之後的結果，又由于我的導覽列進來有動畫的，所有top值首先設為-40px，然後從-40px的位置出現，這個40px也正好是導覽列的高度。

/*固定定位*/
.fixed{
    position: fixed;
    top: -px;
    z-index: ;
}
           

代碼

頁面加載後，給window添加一個滾動監聽，監聽滑動事件，然後判斷如果移動到高于190的位置後，給導覽列添加上fixed Class，每次要執行動畫之前都将top值設為-40px，然後判斷動畫是否執行過，沒有執行過就添加一個屬性動畫并将動畫執行标志置為true，如果沒有移動到高于190的位置，移除fixed Class，将動畫标志置為false

//标示動畫是否執行
var isAnimated = false;

$(document).ready(function(){

    //on() 添加監聽  "所要監聽的事件" function(){}當監聽到事件後執行的方法
    $(window).on("scroll",function(){
        //this代表window scrollTop()向上滑動的距離
        if($(this).scrollTop() > ){
            $(".nav").addClass("fixed");
            //如果動畫執行過
            if(!isAnimated){
                $(".nav").css("top","-40px");//每次要執行動畫之前都将top值設為-40px
                $(".nav").animate({"top":"0px"},);
                isAnimated = true;
            }
        }else{
            isAnimated = false;
            $(".nav").removeClass("fixed");
        }
    })

});
           

項目下載下傳：仿唯品會項目