为何我的JavaScript粘性导航栏无法正常工作？

你的粘性导航栏没生效主要是两个核心问题导致的，还有一个细节可以优化，下面逐一解决：

1. JavaScript元素获取API写错了 #

你代码里用的document.getElementByClass是不存在的方法，正确写法是复数形式的document.getElementsByClassName，而且这个方法返回元素集合，得取第一个匹配的元素：

var topnav = document.getElementsByClassName("topnav")[0];

更推荐用querySelector，语法更简洁，直接返回第一个匹配元素：

var topnav = document.querySelector(".topnav");

2. DOM结构和CSS选择器不匹配 #

你的.topnav嵌套在.content容器内部，但CSS里的.sticky+.content是给粘性导航后面的.content元素加padding，当前结构里.sticky的兄弟是.row，不是.content，这会导致导航固定后下面内容突然上移，且选择器完全不生效。

修复方法：调整DOM结构 #

把.topnav移到.content外面，让它和.content成为兄弟元素：

<!-- 导航栏移到content外面 -->
<div class="topnav">
  <a class="active" href="#">Home</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" style="float:right">Contact Us</a>
</div>

<div class="content">
  <div class="header">
    <img src="./images/Strike_Printng-removebg-preview.png" alt="lightning bolt with logo name strike printing">
    <!--<h1>strike printing</h1>-->
  </div>

  <div class="row">
    <!-- 原row内部内容保持不变 -->
  </div>

  <div class="footer">
    <!-- 原footer内容保持不变 -->
  </div>
</div>

3. 额外优化：避免导航栏溢出页面 #

原代码里body有padding:10px，当导航栏设置position:fixed; width:100%时会超出页面左右边界，修改.sticky类的宽度：

.sticky {
  position: fixed;
  top: 0;
  width: calc(100% - 20px); /* 减去body左右padding总和 */
}

完整修复后的代码片段 #

JavaScript #

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

var topnav = document.querySelector(".topnav");
var sticky = topnav.offsetTop;

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

CSS（仅修改相关部分） #

.sticky {
  position: fixed;
  top: 0;
  width: calc(100% - 20px);
}

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

内容的提问来源于stack exchange，提问作者Alex m.