[英]Uncaught TypeError: Cannot read property 'offsetTop' of null
I am using HTML, CSS and JavaScript to create a web page with a sticky and responsive navigation bar. 我正在使用HTML,CSS和JavaScript来创建带有粘性和响应式导航栏的网页。 I created the responsive navigation bar and am trying to make it sticky as well. 我创建了响应式导航栏,并试图使其保持粘性。 The issue is that it's not sticky and shows error: Uncaught TypeError: Cannot read property 'offsetTop' of null 问题是它不粘滞并显示错误:Uncaught TypeError:无法读取null的属性“ offsetTop”
HTML code: HTML代码:
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#career">Careers</a>
<a href="#fellowship">About Us</a>
<a href="javascript:void(0);" class="icon" onclick="myFunctionForResponsive()">
<i class="fas fa-bars"></i>
</a>
</div>
JavaScript code: JavaScript代码:
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunctionForSticky()};
// Get the navbar
var navbar = document.getElementById("myTopnav");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
Remove "sticky" when you leave the scroll position
function myFunctionForSticky() {
if(window.pageYOffset >= sticky){
console.log("window.pageYOffset >= sticky");
}
else{
console.log("Not window.pageYOffset >= sticky");
}
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
/*Toggle between adding and removing the "responsive" class to topnav
when the user clicks on the icon*/
function myFunctionForResponsive() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
If I am taking class instead of id then it's showing the error: Uncaught TypeError: Cannot read property 'remove' of undefined 如果我上课而不是id,则显示错误:Uncaught TypeError:无法读取未定义的属性“ remove”
Code that wants to access the DOM needs to be wrapped in an event listener that listens on DOMContentLoaded
. 想要访问DOM的代码需要包装在监听DOMContentLoaded
的事件监听器中。
Currently you are trying to access the element with the id myTopnav
when the browser hasn't parsed the HTML yet, which means your document.getElementById("myTopnav");
当前,当浏览器尚未解析HTML时,您正在尝试访问id为myTopnav
的元素,这意味着您的document.getElementById("myTopnav");
returns null
. 返回null
。 In the next line of code you are trying to read the offsetTop
property of the null
that your document.getElementById("myTopnav")
returned, resulting in Cannot read property 'offsetTop' of null
. 在下一行代码中,您尝试读取document.getElementById("myTopnav")
返回的null
的offsetTop
属性,导致Cannot read property 'offsetTop' of null
。
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
// When the event DOMContentLoaded occurs, it is safe to access the DOM
// When the user scrolls the page, execute myFunction
window.addEventListener('scroll', myFunctionForSticky);
// Get the navbar
var navbar = document.getElementById("myTopnav");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
// Remove "sticky" when you leave the scroll position
function myFunctionForSticky() {
if (window.pageYOffset >= sticky) {
console.log("window.pageYOffset >= sticky");
} else {
console.log("Not window.pageYOffset >= sticky");
}
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
/*Toggle between adding and removing the "responsive" class to topnav
when the user clicks on the icon*/
function myFunctionForResponsive() {
navbar.classList.toggle('responsive');
}
})
some DOM element don't have this 'offsetTop' property check the existence before use. 一些DOM元素没有此'offsetTop'属性,请在使用前检查其是否存在。 elements have this property 元素具有此属性
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.