页面导航栏上拉显示下拉隐藏

最新推荐文章于 2024-04-30 16:57:21 发布

weixin_34265814

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量984

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dravenT1/p/9155849.html

版权

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>

转载于:https://www.cnblogs.com/dravenT1/p/9155849.html

weixin_34265814

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
页面导航栏上拉显示下拉隐藏

1)　　页面加载时导航栏悬浮在页面的上方，当滚动条向下滚动时导航栏隐藏，当滚动条向上滚动时导航栏显示。2)　　页面打开时，先获取到页面的滚动条的初始高度（也可直接设为0），作用是初始化一个值，用于后面事件触发后进行判断。　　再获取导航栏的高度，作用是在初始位置进行下拉页面后，在什么时候触发导航栏隐藏。最后写滚动条触发函数3)　　事件触发后，首先判断事件发生后滚动条...
复制链接

扫一扫