页面导航栏上拉显示下拉隐藏
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>
