javascript - 粘性导航栏的问题

Question

我在我的网站上遇到了粘性导航栏的问题。

我为此导航栏使用了w3schools的代码。问题是在页面加载时，出现导航粘滞效果，当页面完全加载时，导航到页面顶部。

链接到我的网站

以下是导航菜单的外观：

CSS:

      .sticky {
      position: fixed;
      top: 0;
      width: 100%;
    }
    
    .sticky + .content {
      padding-top: 60px;
    }




    <script>
    window.onscroll = function() {myFunction()};
    
    var navbar = document.getElementById("navbar");
    var sticky = navbar.offsetTop;
    
    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
      } else {
        navbar.classList.remove("sticky");
      }
    }
    </script>

标签： javascripthtmlcss

Answer 1

试试这个。

#navbar {
  position: sticky;
  z-index: 1;
  top: 0;
}