javascript - 无法读取null的属性“offsetTop”(粘性导航栏)

标签 javascript html navbar

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).readythis question中的一种替代方法。

关于javascript - 无法读取null的属性“offsetTop”(粘性导航栏),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55070744/

相关文章:

javascript - 指令的angularjs typescript Controller 类中未定义的范围变量

javascript - 为通过 .createElement ('div' 创建的 div 的所有元素设置样式

html - 我的导航栏(粘贴在顶部)在其下面的另一个div下方移动

twitter-bootstrap - Bootstrap navbar align 想要向右对齐

html - 使用可变高度内容使页脚填充页面的其余部分

html - Bootstrap导航栏布局错误

javascript - JavaScript数组长度不正确

javascript - Highcharts 仅指定绘图区域的高度

javascript - 所有Bootstrap下拉菜单均显示相同的项目

html - 尖括号(<)不触发html代码