Question

无法修复“未捕获的类型错误：无法读取未定义的属性‘remove’” - 我已咨询其他答案

2021-01-21

855

javascript

我正在尝试实现这段代码以在我的网站上启用粘性导航栏： https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

我不断收到以下错误：“index.html:44 Uncaught TypeError: Cannot read property 'remove' of undefined”

以下是代码片段：


<body class="is-preload">
        <div class="topnav">
            <a class="active" href="#header">Home</a>
            <a href="#first">Book an Appointment</a>
            <a href="#second">Contact</a>
            <a href="#third">About</a>
            
          </div>
          <script>// When the user scrolls the page, execute myFunction
            
            
            
            
            window.onscroll = function() {myFunction()};
            // Get the navbar
            var navbar = document.getElementsByClassName("topnav");
            
            
            
            
            // Get the offset position of the navbar
            var sticky = navbar.offsetTop;
            
            
            // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
            function myFunction() {
              if (window.pageYOffset >= sticky) {
                navbar.classList.add("sticky")
              } else {
                navbar.classList.remove("sticky");
               
              }
            }</script>

我无论如何也想不出哪里出了问题。这是 W3C 网站上的一段代码，它在那里运行良好。

Answer 1

乍一看，似乎是因为以下部分返回一个数组，而您将其视为一个元素：

var navbar = document.getElementsByClassName("topnav");

您得到的实际上是一个以导航栏为第一个元素的数组。将其更改为以下内容，希望它能正常工作：

var navbar = document.getElementsByClassName("topnav")[0];

Answer 2

您的 getElementsByClassName 将返回一个元素数组，而不是单个元素，因此您需要使用

document.getElementsByClassName("topnav")[0];

如果您在该类中只有一个元素，或者您也可以切换到 ID

Answer 3

您需要粘性导航栏。只需使用 querySelector 代替 getElementsByClassName ，如下所示：

var navbar = document.querySelector(".topnav");