未被捕获的TypeError:无法读取null的属性"offsetTop" [英] Uncaught TypeError: Cannot read property 'offsetTop' of null

问题描述

我正在使用HTML，CSS和JavaScript创建带有粘性和响应式导航栏的网页.我创建了响应式导航栏，并试图使其保持粘性.问题是它不粘滞并显示错误: 未捕获的TypeError:无法读取null的属性"offsetTop"

I am using HTML, CSS and JavaScript to create a web page with a sticky and responsive navigation bar. 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

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代码:

JavaScript code:

// 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";
    }
}

如果我要上课而不是上课，那么它会显示错误: 未捕获的TypeError:无法读取未定义的属性删除"

If I am taking class instead of id then it's showing the error: Uncaught TypeError: Cannot read property 'remove' of undefined

推荐答案

想要访问DOM的代码需要包装在侦听DOMContentLoaded的事件侦听器中.

Code that wants to access the DOM needs to be wrapped in an event listener that listens on DOMContentLoaded.

当前，当浏览器尚未解析HTML时，您正在尝试访问ID为myTopnav的元素，这意味着您的document.getElementById("myTopnav");返回null.在下一行代码中，您尝试读取您的document.getElementById("myTopnav")返回的null的offsetTop属性，结果为Cannot read property 'offsetTop' of null.

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"); returns 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.

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');
  }
})

这篇关于未被捕获的TypeError:无法读取null的属性"offsetTop"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！