為什么我的轉換在類切換上不起作用？

Question

我試圖在向下滾動時切換固定到此引導程序導航的位置。 我希望過渡順利。 但是過渡效果根本不起作用。 我究竟做錯了什么？

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">
    <div class="container">
        <a class="navbar-brand">LOGO</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>
          </ul>
        </div>
    </div>
</nav>

window.addEventListener('scroll', function() {
    var header = document.getElementById("navbar");
    header.classList.toggle("fixednav", window.scrollY > 100);
});

.fixednav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9999;
    transition: top 0.5s linear;
}

Answer 1

您是否嘗試過設置初始值以便過渡屬性知道要過渡到的起始值？

top: 0;

您還可以嘗試將過渡屬性添加到元素本身而不是切換類。