导航菜单下拉隐藏上拉显⽰源码及说明
⼀：效果描述
1、页⾯打开时，导航栏悬浮的页⾯上部
2、页⾯向下拉的时候导航栏隐藏
3、页⾯向上拉的时候导航栏出现。
⼆：原理讲解
页⾯打开时，先获取到页⾯的滚动条的初始⾼度（也可直接设为0），作⽤是初始化⼀个值，⽤于后⾯事件触发后进⾏判断。再获取导航栏的⾼度，作⽤是在初始位置进⾏下拉页⾯后，在什么时候触发导航栏隐藏。
最后写滚动条触发函数
初始位置：页⾯打开时的位置
三：事件函数讲解
事件触发后，⾸先判断事件发⽣后滚动条的⾼度与导航栏的⾼度。
当判断为True时，导航条隐藏；当判断为False时，导航条出现。
然后判断本次事件导航条的⾼度与上次事件导航条的⾼度。
当上次⾼度，低于本次⾼度，说明⽤户在看下⾯的内容，导航栏隐藏
当上次⾼度，⾼于本次⾼度，说明⽤户在看上⾯的内容，导航栏出现
四：代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
导航页源码
<style>
/* 导航栏样式 */
.navigation{
width: 100%;
height: 50px;
background-color:#ac0e63;
position: fixed;          /* 绝对定位（根据游览器边框定位） */
left:0;
top: 0;
transition: top 0.5s;    /* 动画效果，top：显⽰的效果， 1s：是效果产⽣所花费的时间*/
}
/
* 隐藏效果 */
.hide{
top: -60px;
}
/* 内容栏样式 */
.content{
width: 80%;
height: 5000px;
margin: 60px auto;
background-color:#00a8a8;
}
</style>
</head>
<body>
<div class="navigation"></div>
<div class="content"></div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function(){
var page_heig = $(document).scrollTop();            /* 初始化。⽤于第⼀次获取滚动条的⾼度 */
var navigation = $('.navigation').outerHeight();    /* 获取该元素的⾼度 */
$(window).scroll(function() {                      /* 滚动条触发事件 */
var real_heig = $(document).scrollTop();        /* 事件触发后获取滚动条⾼度 */
if (real_heig > navigation){                    /* 触发后的⾼度与元素的⾼度对⽐ */
$('.navigation').addClass('hide');          /* True 添加隐藏属性 */
}else {
$('.navigation').removeClass('hide');      /* False 删除隐藏属性 */
}
if (real_heig < page_heig){                    /* 触发后的⾼度与上次触发后的⾼度 */
$('.navigation').removeClass('hide');      /* True 删除隐藏属性 */
}
page_heig = $(document).scrollTop();            /* 再次获取滚动条的⾼度，⽤于下次触发事件后的对⽐ */            });
});
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。