JQuery 实现导航栏网页滚动下拉高度变小效果

很多网站都有顶部导航栏或是头部导航栏在网页下拉滚动过程中,高度变小的效果。实现方法,可以利用 JQuery 监控滚动条的位置变化,然后添加 CSS 样式或者删除 CSS 样式。

实现方法:

1、调用 JQuery

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

2、HTML代码

<div class="container">
<div class="header">
<div class="logo">
<h1>IM艾穗博客</h1>
</div>
</div>
<div class="content">
</div>
</div>

3、CSS代码

* {
margin: 0;
padding: 0;
}
body {
background: #FFF;
}
.container {
display: flex;
flex-direction: column;
}
.header {
position: fixed;
width: 100%;
line-height: 80px;
border-bottom: 1px solid #cecece;
background: #888;
flex: 0 0 auto;
transition-delay: 0.5s;
transition: all 0.2s ease-in-out;
}
.header > .logo {
color:#f60;
padding: 10px;
}
.header.sticky {
line-height: 40px;
}
.content {
height: 1000px;
}

4、JS代码

$( window ).scroll(function() {
if($(this).scrollTop() > $('.header').height()) {
$(".header").addClass("sticky")
} else {
$(".header").removeClass("sticky")
}
});

0

Leave a Reply

Your email address will not be published. Required fields are marked *

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

JQuery 实现导航栏网页滚动下拉高度变小效果
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close