我有一个 javascript 函数，当它到达顶部时改变导航栏的高度，当用户向下滚动时它变小。
function fixIfScrolled() {
if (window.scrollY == nav.offsetTop) {
document.getElementById("nav").classList.add("largerNavbar");
} else {
document.getElementById("nav").classList.remove("largerNavbar");
}
}
window.onscroll = function() { fixIfScrolled() };
所以，它基本上是在到达最顶部时添加类。
它有效，但会立即发生变化。我想在调整大小时平滑过渡。我该怎么做，是否可以在没有 jquery 的情况下做到这一点？
编辑:
CSS
#nav {
overflow: hidden;
background-color: #333;
}
.largerNavbar {
height: 150px;
}
#nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
最佳答案
bar使用transition，并且使用class而不是id，因为id的优先级高于class，所以largerNavbar的高度样式不会覆盖id的高度样式:
.nav {
overflow: hidden;
background-color: #333;
transition: height 0.8s;
-moz-transition:height 0.8s; /* Firefox 4 */
-webkit-transition:height 0.8s; /* Safari and Chrome */
-o-transition:height 0.8s;
}
var a = document.querySelector('.nav');
a.addEventListener('click', function(e){
setTimeout(function() {
a.classList.add("largerNavbar");
}, 0);
}).nav
{
width:100px;
height:50px;
background:blue;
transition:height 1s;
-moz-transition:height 1s; /* Firefox 4 */
-webkit-transition:height 1s; /* Safari and Chrome */
-o-transition:height 1s; /* Opera */
}
.largerNavbar {
height: 150px;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="nav"></div>
<div class="para">click the top div.</div>
</body>
</html>关于javascript - 更改div样式时如何进行平滑更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46313419/