一：效果描述
1、页面打开时，导航栏悬浮的页面上部
2、页面向下拉的时候导航栏隐藏
3、页面向上拉的时候导航栏出现。
二：原理讲解
页面打开时，先获取到页面的滚动条的初始高度（也可直接设为0），作用是初始化一个值，用于后面事件触发后进行判断。
再获取导航栏的高度，作用是在初始位置进行下拉页面后，在什么时候触发导航栏隐藏。
最后写滚动条触发函数
初始位置：页面打开时的位置
三：事件函数讲解
事件触发后，首先判断事件发生后滚动条的高度与导航栏的高度。
当判断为True时，导航条隐藏；当判断为False时，导航条出现。
然后判断本次事件导航条的高度与上次事件导航条的高度。
当上次高度，低于本次高度，说明用户在看下面的内容，导航栏隐藏
当上次高度，高于本次高度，说明用户在看上面的内容，导航栏出现
四：JQuery实现代码
<!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>原文来源：https://blog.csdn.net/q627794135/article/details/80240627
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！