未捕获的类型错误：无法读取 null 的属性“offsetTop”答案

【问题标题】：Uncaught TypeError: Cannot read property 'offsetTop' of null未捕获的类型错误：无法读取 null 的属性“offsetTop”
【发布时间】：2018-09-27 08:22:16
【问题描述】：

我正在使用 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，那么它会显示错误：未捕获的类型错误：无法读取未定义的属性“删除”

【问题讨论】：

页面中的脚本在哪里？
@connexo 在末尾的部分，在 css 链接之后。
然后你需要将想要访问 DOM 的代码封装在一个监听 DOMContentLoaded 的事件监听器中。
@connexo 你能解释一下你说的吗？我是新手。
它还有助于在“离开滚动位置时移除“粘滞””前面添加 2 个斜线

标签： javascript css html navigationbar

【解决方案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');
  }
})

【讨论】：

嘿，它有效，但有 2 个问题： 1. myFunctionForResponsive() 不起作用，我试图将之前的代码放入此函数中，但仍然按下图标无济于事。 2. 我以视差形式创建了我的网页，所以当背景图像发生变化时，导航栏会变成灰色，即无法访问，它会发生在每个背景图像上。
我用 z-index 修复了第 2 个问题，但是如何提高响应能力？
这是一个完全不同的问题。你问的那个应该得到回答吧？

【解决方案2】：

一些 DOM 元素没有这个 'offsetTop' 属性在使用前检查是否存在。元素有这个属性

【讨论】：