javascript - 导航栏过渡 CSS 问题

Question

我有一个导航栏，当我向下滚动时它会进行转换。
当我向上滚动时，过渡不起作用，我不知道为什么。有人可以帮我解决这个问题吗？

当 Math.round($(window).scrollTop()) > 100 时，JS 代码正在添加滚动类。

@supports (position: sticky) {
    body {
      padding-top: 0;
    }

    header {
      position: sticky;
    }

}

.scrolled {
    transition: 0.5s ease;
   }

.scrolled.header {
    height: 50px; 
    background-color: rgba(0, 0, 0, 0.8);
    transition: 0.5s ease;
  }

.scrolled.header .header-menu {
    line-height: 40px; 
    transition: 0.5s ease;
  }

<div class="block">
    <header class="header">
        <a href="#" class="header-logo"><i class="fas fa-signal"></i>NAME</a>
        <nav class="header-menu">
            <a href="#">Accueil</a>
            <a href="#">Compétences</a>
            <a href="#">Parcours</a>
            <a href="#">Projets</a>
            <a href="#">Hobbies</a>
            <a href="#">Contact</a>
        </nav>
        <a href="#" class="toggle" id="burgerButton">
            <i class="fas fa-bars"></i>
        </a>
    </header>
</div>

Answer 1

如果我理解正确:向下滚动时添加 .scrolled 类，向上移动时删除它？如果是这样，您还应该添加过渡:0.5s ease；到导航栏本身。因为当你删除 .scrolled 类时，如果导航没有在它的 css 中指定，为什么会发生转换？