粘性导航栏的问题

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 {&nbsp; position: sticky;&nbsp; z-index: 1;&nbsp; top: 0;}

Answer 2

尝试将脚本包装在DOMContentLoaded事件侦听器中：document.addEventListener('DOMContentLoaded', function () {&nbsp; window.onscroll = function () { myFunction() };&nbsp; var navbar = document.getElementById("navbar");&nbsp; var sticky = navbar.offsetTop;&nbsp; function myFunction() {&nbsp; &nbsp; if (window.pageYOffset >= sticky) {&nbsp; &nbsp; &nbsp; navbar.classList.add("sticky")&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; navbar.classList.remove("sticky");&nbsp; &nbsp; }&nbsp; }})另外，您可以function() {myFunction()}仅替换为myFunction