导航条在到达滚动位置0时不起作用

Question

我阅读并尝试了几个在滚动时制作导航条的示例，但没有成功。我正在使用最新的引导程序模板和CDN链接，还建立了js文件的链接。示例代码取自w3school。我在代码中没有发现任何错误。请留下一些建议。 这分别是我的html，css和js。

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
} 

body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
} 

<div class="header">
  <h2>Open Schooling</h2>
  <p>Open Schooling is a necessaity.</p>
</div>

<div id="navbar">
  <a class="active" href="#">Home</a>
  <a href="#">News</a>
  <a href="#">Contact</a>
</div>

<div class="content">
  <h3>Open Schooling</h3>
  <p>Many students are<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    .....<br>
    Some text
  </p>
</div>

Answer 1

在这种情况下，问题出在HTML代码中<script>标签的位置。将<script>标记移到文档的最后，就在结束</body>标记之前，此问题已解决。

为什么这可以解决问题？

JavaScript代码在通过<script>标签插入的位置执行。这意味着它将必须使用当时已知的确切情况和状态进行工作。在这种情况下，在代码中插入<script>之前先插入<div id="navbar">标签。从JS的角度来看，该#navbar元素不存在，因此document.getElementById("navbar")不会产生预期的结果。

将<script>标记移到HTML代码的末尾，或者至少移到<div id="navbar">标记后，JavaScript会在执行时知道此#navbar元素，该代码将起作用。

您可以使用每个现代浏览器（Desktop）中内置的JavaScript Console来识别此问题。在这种情况下，错误消息为

  

无法读取null的属性“ offsetTop”

在这种情况下，

null是查询document.getElementById("navbar")的结果。如果可以确定，您不会错把参数（navbar拼写错误[我通过复制并粘贴有疑问的名称来向自己保证，]这意味着，您必须处理{ {1}}标签。

附录

如果无法通过任何原因更改<script>标记的位置，则可以尝试通过将代码包装在函数中来推迟代码执行，并在页面加载后执行该函数。 “负载”具有不同的含义：

1. HTML已完全加载，并且DOM已准备就绪，可以继续处理。
2. 已加载任何外部内容，例如图像，样式表和脚本

在＃1的情况下，有一个名为<script>的事件，您可以对此做出反应；在＃2的情况下，该事件称为DOMContentLoaded

在这里查看DOMContentLoaded，在这里查看load。