粘性导航栏的问题

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>

Answer 1

尝试这个。

#navbar {

  position: sticky;

  z-index: 1;

  top: 0;

}

Answer 2

尝试将脚本包装在DOMContentLoaded事件侦听器中：

document.addEventListener('DOMContentLoaded', function () {

  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");

    }

  }

})

另外，您可以function() {myFunction()}仅替换为myFunction