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 粘性导航的例子。 在控制台中显示:

Uncaught TypeError: Cannot read property 'offsetTop' of null

最佳答案

看起来找不到任何 id “navbar” 的元素。

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

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

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

相关文章:

javascript - React-Typescript : I don't find the problem why my getCurrentTime Function won't work

html - 在 Bootstrap 3 中更改折叠导航栏上的菜单顺序

css - 如何修复悬停时背景图像的 CSS 过渡?

javascript - 如何根据 JQuery 选择的另一个选项隐藏\显示选项的特定值?

javascript - 在 AngularJS 中,您可以为每个元素使用不同的定义顺序来链接属性指令事件吗?

javascript - 将 select2.js 与多个选择 optgroup 和 knockoutJS 一起使用

html - Bootstrap "img-responsive"为什么在我的代码中不起作用?

javascript - 检测文件上传是通过拖动还是常规输入点击

html - 如何根据相邻单元格的高度来限制表格单元格 (td) 的高度?

javascript - 侧面菜单不会在移动设备上滚动