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的其中一种香草替代品。
您应该在HTML代码中创建类似此div的标记
<div id='navbar'></div>