时间戳

首页 > 解决方案 > 导航栏杆到达滚动位置 0 不起作用

javascript - 导航栏杆到达滚动位置 0 不起作用

问题描述

我阅读并尝试了几个在滚动时制作导航栏的示例，但没有成功。我正在使用最新的引导模板和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>

标签： javascriptnavbar

解决方案

在这种情况下，问题在于<script>标签在 HTML 代码中的位置。在该<script>标签移动到文档的最后，就在结束</body>标签之前，问题得到了解决。

为什么这能解决问题？

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

当您将<script>标签移动到 HTML 代码的末尾，或者至少在<div id="navbar">标签之后，这个#navbar元素在执行时 JavaScript 是已知的，并且代码将起作用。

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

无法读取 null 的属性“offsetTop”

null在这种情况下是查询的结果document.getElementById("navbar")。如果您确定，您没有拼错参数 ( navbar) [我向自己保证这一点，通过复制和粘贴有疑问的名称]，这意味着您必须处理<script>标签的位置。

附录

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

  1. HTML 已完全加载，并且 DOM 已准备好并已完成处理。
  2. 加载任何外部内容，如图像、样式表和脚本

如果 #1 有一个事件被调用DOMContentLoaded，你可以做出反应，如果 #2 事件被调用load

请参阅此处查看DOMContentLoaded和此处查看load。

推荐阅读