jQuery實現滾動后導航欄保持固定,及內容飛出顯示

jQuery實現在鼠標滾動后導航欄保持固定 
<script>   
        $(document).ready(function() { 
              var navOffset=$(".header-bottom").offset().top; 

//offset();方法獲取的元素相對於當前document元素的位置，可以將其理解為一個絕對位置 
             $(window).scroll(function(){ 
               var scrollPos=$(window).scrollTop(); 
               if(scrollPos >=navOffset){   
                    $(".header-bottom").addClass("fixed"); 
                 }else{   
                    $(".header-bottom").removeClass("fixed"); 
                }   
             });   
        });   
    </script> 

滾動條滾動到相應的位置內容飛出顯示，如下，實現一個從右向左飛入的效果 

首先，設置一個開始的樣式 

.content .row{ margin-left: 120%; // 設置與左邊的外邊距為120%，讓內容在顯示區外面 
} 


然后，添加滾動事件 


$(document).ready(function() { 
        var navoffeset=$(".content2 .row").offset().top; 
        // 通過 offset().top,得到和document之間的距離 
        $(window).scroll(function(){ 
            var scrollpos=$(window).scrollTop(); 
            if(scrollpos >=navoffeset-500) { 

// 注：這里的判斷不是直接大於與document之間的距離，而是在這個距離的基礎上減去500,這個值根據自己的情況進行調整 

// 為什么要減，因為頁面本身有一個高度，還沒有到和document之間的距離時，就已經能夠可以看到內容顯示了，而我們想在看到它時就去飛入 $(".content2 .row").animate({marginLeft: "200px"}); 

} 
        }); 
    });