Question

我有一个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;

}

Answer 1

对bar使用transition，并使用class not 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>

如何在更改div的样式时进行平滑的更改

1 个答案: