删除
我一直在尝试使用Jquery Animate和CSS，但我似乎无法让它发挥作用；
$(function() {
var navShrink = $("#nav-anim");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
navShrink.removeClass("navigation").addClass("nav-shrink");
} else {
navShrink.removeClass("nav-shrink").addClass("navigation");
}
});
});
css；
#nav-anim {
transition: height 1s ease;
}
.navigation {
height: 12.5vh;
}
.nav-shrink {
height: 7!important;
}
html，但我遗漏了我所有的内容
<div id="nav-anim" class="row navigation fixed-top no-gutters">
</div>
这段代码有效，它将导航栏的高度缩小到500像素之后。然而，它没有过渡。我只是想缓和一下身高的变化。它正在更改的每个类都有一个不同的"类"；高度"；属性集。
想知道是否有一种方法可以在没有jquery ui的情况下做到这一点。
!important规则，这样就不会覆盖样式。这应该是最佳实践。
更新：在不使用jQuery的情况下添加了代码段。
const navShrink = document.querySelector('.navigation__container');
document.onscroll = shrinkNavigation => window.pageYOffset >= 500 ? navShrink.classList.add('nav-shrink') : navShrink.classList.remove('nav-shrink');body {
margin: 0;
}
.section {
height: 3000px;
background-color: lightgrey;
}
.navigation__container {
position: sticky;
top: 0;
background-color: bisque;
height: 12.5vh;
display: flex;
align-items: center;
transition: all 0.4s ease;
}
.nav-shrink {
height: 7vh;
}
.menu {
list-style: none;
}
.nav-shrink.menu__item--anchor {
color: white;
}
.menu {
display: flex;
flex: 1 1 auto;
justify-content: space-around;
}<div class="section">
<nav class="navigation__container">
<ul class="menu">
<li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li>
<li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li>
<li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li>
<li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li>
<li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li>
</ul>
</nav>
</div>您可以在CSS中添加以下行：
.navigation,
.nav-shrink {
-webkit-transition: background-color 0.4s;
-moz-transition: height 0.4s;
-o-transition: height 0.4s;
-ms-transition: height 0.4s;
transition: height 0.4s;
}