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

Question

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'

Answer 1

似乎找不到ID为"navbar"的任何元素。

这可能是由于没有ID为"navbar"的元素引起的。

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

Answer 2

因为您的演示中没有名为“ navbar”的元素

您应该在HTML代码中创建一个类似div的标签

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