向下滚动隐藏导航栏,向上滚动显示

最新推荐文章于 2024-07-28 23:45:50 发布

CrazBarry

最新推荐文章于 2024-07-28 23:45:50 发布

阅读量9.6k

点赞数 4

分类专栏： jquery

本文链接：https://blog.csdn.net/CrazBarry/article/details/74537736

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0;
padding: 0;
height: 3000px;
}
#fix_nav{background-color: #ccc;}
.nav{width:980px; margin:0 auto;}
.nav li{display:inline-block; *display:inline; *zoom:1; margin:0 10px;}
.nav li a{display:block; padding:5px 10px;text-decoration: none;color: #fff}
.fixed-nav{
position: fixed;
width:100%;
top:-40px;
-webkit-transition: top .5s;
-moz-transition: top .5s;
-o-transition: top .5s;
transition: top .5s;
}
.fixed-nav-appear{top:0;}
.fix_sec{
position: fixed;
width:100%;
top:0;
z-index: 999;
-webkit-transition: top .5s;
-moz-transition: top .5s;
-o-transition: top .5s;
transition: top .5s;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="fix_nav">
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Css/Div</a></li>
<li><a href="#">Javascript交互</a></li>
</ul>
</div>
<section>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
<div class="content">这里是内容区块</div>
</section>
<script>
//设置导航滚动到多少再消失(可自己设置)
var fix_length = 200;

// 获取导航节点
var $nav = $('#fix_nav');

// 获取导航节点距离顶部位置
var navTop = $nav.offset().top;

// 获取导航的高度(包括border)
var navH = $nav.outerHeight();

// 设置初始位置
var winTop_1=0;

// 判断浏览器宽度(可用于自适应是否启用此效果)
var winWidth=$(window).width();

// 判断滚动条

$(window).on('scroll',function(){
// 滚动条距离顶部距离
var winTop_2 = $(window).scrollTop();
//开始浮动，不过不显示
if(winTop_2>navTop && winWidth>980){
$nav.addClass('fixed-nav');
if(winTop_2>winTop_1){
$nav.addClass('fix_sec');
if(winTop_2>fix_length){
$nav.removeClass('fix_sec');
}
}
}else{
$nav.removeClass('fixed-nav');
}
//判断鼠标向上滚动，显示出来
if(winTop_2>winTop_1 && winWidth>980){
$nav.removeClass('fixed-nav-appear');
}else if(winTop_2<winTop_1){
$nav.addClass('fixed-nav-appear');
$nav.removeClass('fix_sec');
}
// 滚动后距离赋值
winTop_1 = $(window).scrollTop();
})
</script>
</body>
</html>