1) 頁面加載時導航欄懸浮在頁面的上方，當滾動條向下滾動時導航欄隱藏，當滾動條向上滾動時導航欄顯示。
2) 頁面打開時，先獲取到頁面的滾動條的初始高度（也可直接設為0），作用是初始化一個值，用於后面事件觸發后進行判斷。
再獲取導航欄的高度，作用是在初始位置進行下拉頁面后，在什么時候觸發導航欄隱藏。 最后寫滾動條觸發函數
3) 事件觸發后，首先判斷事件發生后滾動條的高度與導航欄的高度。 當判斷為True時，導航條隱藏；當判斷為False時，導航條出現。
然后判斷本次事件導航條的高度與上次事件導航條的高度。
當上次高度，低於本次高度，說明用戶在看下面的內容，導航欄隱藏
當上次高度，高於本次高度，說明用戶在看上面的內容，導航欄出現
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 導航欄樣式 */ 8 .navigation{ 9 width: 100%; 10 height: 50px; 11 background-color: #d0f079; 12 position: fixed; 13 left:0; 14 top: 0; 15 text-align: center; 16 transition: top 0.5s; 17 } 18 /* 隱藏效果 */ 19 .hide{ 20 top: -60px; 21 } 22 /* 內容欄樣式 */ 23 .content{ 24 width: 80%; 25 height: 5000px; 26 margin: 60px auto; 27 background-color: #41bcff; 28 text-align: center; 29 } 30 31 </style> 32 </head> 33 <body> 34 35 <div class="navigation">導航菜單欄</div> 36 <div class="content">內容</div> 37 //此處jquery路徑要替換 38 <script src="js/jquery-2.0.3.js"></script> 39 <script> 40 $(function(){ 41 //頁面初始化的時候，獲取滾動條的高度（上次高度） 42 var start_height = $(document).scrollTop(); 43 //獲取導航欄的高度(包含 padding 和 border) 44 var navigation_height = $('.navigation').outerHeight(); 45 $(window).scroll(function() { 46 //觸發滾動事件后，滾動條的高度（本次高度） 47 var end_height = $(document).scrollTop(); 48 //觸發后的高度 與 元素的高度對比 49 if (end_height > navigation_height){ 50 $('.navigation').addClass('hide'); 51 }else { 52 $('.navigation').removeClass('hide'); 53 } 54 //觸發后的高度 與 上次觸發后的高度 55 if (end_height < start_height){ 56 $('.navigation').removeClass('hide'); 57 } 58 //再次獲取滾動條的高度，用於下次觸發事件后的對比 59 start_height = $(document).scrollTop(); 60 }); 61 }); 62 </script> 63 </body> 64 </html>