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缓解；导航栏本身。因为当您删除.scrolled类时，如果导航器的css中没有指定导航，为什么会发生过渡？

NavBar Transition CSS故障

1 个答案: