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

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

实现方法：

1、调用 JQuery

2、HTML代码

IM艾穗博客

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")

}

});