这是导航栏缩小之前的CSS：
.navbar{
display: flex;
justify-content: space-evenly;
align-items: center;
position: fixed;
width: 100%;
height: 15vh;
background-color: transparent;
z-index: 1;
transition: 0.6s ease;
}
这是缩小后我想要的：（向下滚动几下）
.navbar.adjust{
background-color: ivory;
height: 10vh;
}
帮助我解决javascript部分。
这是您需要的解决方案。这是一个javascript解决方案。
在toggle()这里使用该方法。
类adjust规则将立即应用于第一个滚动条。
window.onscroll = function() {
let navbar = document.querySelector('.navbar');
navbar.classList.toggle('adjust', this.scrollY > 0);
};.main {
height: 5000px;
}
.navbar{
display: flex;
justify-content: space-evenly;
align-items: center;
position: fixed;
width: 100%;
height: 15vh;
background-color: transparent;
z-index: 1;
transition: 0.6s ease;
}
.navbar.adjust{
background-color: ivory;
height: 10vh;
}<div class="main">
<ul class="navbar">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句