网页导航栏下滚消失，上滚则显示的效果
2019-08-02 本文已影响0人
Ben大师
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width initial-scale=1.0">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
.top-title{
height:50px;
width:100%;
background: red;
text-align: center;
line-height:50px;
position: fixed;
color:white;
top:0;
left:0;
transition: top 0.5s;
}
.middle{
margin-top:50px;
}
.hidden{
top:-90px;
}
</style>
</head>
<body>
<div class="top-title">这是导航条</div>
<div class="middle">
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
HTML5文档的主要内容区域 HTML5文档的主要内容区域<br />
</div>
<script>
var compare=0;
$(document).scroll(function () {
//获取当前scroll停留的位置
var scrollY = $(document).scrollTop();
if(scrollY <= 200){
$(".top-title").removeClass("hidden");
}
else if(scrollY > 200 && compare < scrollY){
$(".top-title").addClass("hidden");
}else{
$(".top-title").removeClass("hidden");
}
//每次比较之后才进行赋值，那么这个compare就是上次scroll停留的位置的值！
compare = scrollY;
})
</script>
</body>
</html>
搜狗截图20190802102719.jpg
最终的效果：
GIF.gif
