无法读取null的属性'offsetTop'（粘性导航栏）

Posted 2021-04-13

JS代码：

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

这有什么问题？我发现了一个粘性导航的w3school示例。在控制台中显示：

未捕获的TypeError：无法读取null的属性'offsetTop'

答案

它看起来无法找到id为"navbar"的任何元素。

这可能是因为没有一个id为"navbar"的元素。

或者，如果您有一个名为"navbar"的元素，则此代码可能在页面加载完成之前运行。解决此问题的最简单方法是将javascript放在页面底部。或者，您可以使用jQuery的$(document).ready，或this question的其中一种香草替代品。

另一答案

因为您的演示不是名为'navbar'的元素

您应该在html代码中创建类似此div的标记

 <div id='navbar'></div>