未捕获的类型错误：无法读取空值的offsetTop属性。

Question

我将使用HTML、CSS和JavaScript来创建一个具有粘性和响应式导航栏的网页。我已经创建了响应式导航栏并尝试使其成为粘性的。但问题是它不是粘性的，还显示错误：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代码：

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

如果我使用class而不是id，那么就会显示错误：Uncaught TypeError: Cannot read property 'remove' of undefined。

- Dpka

---

你的脚本在页面中包含在哪里？ - connexo

@connexo，你能否解释一下你说的话？我是新手。 - Dpka

同时，在“离开滚动位置时删除“粘性””前面加上2个斜杠也会有所帮助。 - Gerard

在我的回答下面添加了一个解释。 - connexo

@connexo 嘿，我已经在你的回答下添加了我的问题。 - Dpka

Answer 1

想要访问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');
  }
})

- connexo

---

嘿，它起作用了，但有两个问题：1.我的响应式函数（myFunctionForResponsive()）不起作用，我尝试将之前的代码放入此函数中，但仍然无法按下图标。2.我已经以视差形式创建了我的网页，因此当背景图片更改时，导航栏会变灰，即无法访问，在每个背景图片上都会发生这种情况。 - Dpka

我已经通过z-index解决了问题2，但是如何处理响应式布局呢？ - Dpka

那是完全不同的问题。你所问的应该被回答，对吧？ - connexo

Answer 2

一些DOM元素没有'offsetTop'属性，在使用之前请检查其是否存在。有些元素具有此属性

- Chamin Thilakarathne