无法读取 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 粘性导航的例子。在控制台中显示：

未捕获的类型错误：无法读取 null 的属性“offsetTop”

Answer 1

看起来它找不到任何带有 id 的元素"navbar"。

这可能是由于没有带有 id 的元素造成的"navbar"。

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