使用JavaScript实现滚动时显示/隐藏<div>的自适应粘性导航栏

存在的问题及修复步骤： #

• $未定义错误：你的代码依赖jQuery，但对于新手来说，原生JavaScript更易理解且无需额外库，这里改用原生JS实现。
• 橙色导航栏初始显示错误：需在CSS中给#stickys2添加display: none;，确保初始状态隐藏。
• display属性值错误：display: normal不是有效取值，应使用display: block来恢复元素显示。

修改后的完整代码： #

HTML

<div id="stickys">
  我的第一个粘性导航栏。初始显示，滚动时隐藏（即滚动距离>0时），top:100px
</div>
<div id="stickys2">
  我的第二个粘性导航栏。初始隐藏，滚动时显示（即滚动距离>0时），top:200px
</div>
<!-- 占位内容，用于测试滚动 -->
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>

CSS

#stickys {
  top: 100px;
  background-color: yellow;
  height: 100px;
  position: fixed;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100vw;
  left: 0;
  right: 0;
  opacity: 1;
}

#stickys2 {
  top: 200px;
  background-color: orange;
  height: 100px;
  position: fixed;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100vw;
  left: 0;
  right: 0;
  opacity: 1;
  display: none; /* 初始隐藏 */
}

JavaScript

// 监听窗口滚动事件
window.addEventListener('scroll', function() {
  // 获取滚动距离
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  const stickys = document.getElementById('stickys');
  const stickys2 = document.getElementById('stickys2');
  
  if (scrollTop === 0) {
    // 回到顶部时显示黄色导航，隐藏橙色导航
    stickys.style.display = 'block';
    stickys2.style.display = 'none';
  } else {
    // 滚动时隐藏黄色导航，显示橙色导航
    stickys.style.display = 'none';
    stickys2.style.display = 'block';
  }
});

说明： #

• 移除了冗余的!important和无效计算（如calc(100vw - 0%)等价于100vw），简化了CSS代码。
• 用原生JS替代jQuery，无需额外引入库，更适合新手学习理解。
• 确保同一时间仅显示一个导航栏，上下滚动可多次触发状态切换。

内容的提问来源于stack exchange，提问作者Mr_G