我正在使用 HTML、CSS 和 JavaScript 创建一个带有粘性和响应式导航栏的网页。我创建了响应式导航栏,并试图使其具有粘性。问题是它不粘并显示错误: 未捕获的类型错误:无法读取 null 的属性“offsetTop”
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 代码:
// 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";
}
}
如果我正在上课而不是 id 那么它会显示错误: 未捕获的类型错误:无法读取未定义的属性“删除”
最佳答案
想要访问 DOM 的代码需要包装在监听 DOMContentLoaded
的事件监听器中。
当前,当浏览器尚未解析 HTML 时,您正在尝试访问 ID 为 myTopnav
的元素,这意味着您的 document.getElementById("myTopnav");
返回 null
。在下一行代码中,您尝试读取 document.getElementById("myTopnav")
返回的 null
的 offsetTop
属性,导致 Cannot read property 'offsetTop' of null
。
https://developer.mozilla.org/en-US/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');
}
})
关于javascript - 未捕获的类型错误 : Cannot read property 'offsetTop' of null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52532543/