如何实现滚动隐藏导航栏脚本小屏适配及解决嵌套div失效问题

问题1：仅在屏幕宽度<600px时生效的脚本不工作 #

你的原代码只在页面加载时判断一次屏幕宽度，之后如果窗口大小变化（比如从大屏缩到小屏，或者反过来），事件绑定不会自动更新，导致逻辑失效。

修复方案：把宽度判断移到onscroll事件内部，每次滚动时都实时检查当前窗口宽度；同时添加窗口大小变化的监听，避免窗口调整后状态错乱。

修复后的JavaScript代码：

<script>
let prevScrollpos = window.pageYOffset;

window.onscroll = function() {
  // 每次滚动时都检查当前屏幕宽度
  if (document.documentElement.clientWidth < 600) {
    const currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navbar").style.top = "0";
    } else {
      document.getElementById("navbar").style.top = "-50px";
    }
    prevScrollpos = currentScrollPos;
  } else {
    // 大屏模式下强制保持导航栏显示
    document.getElementById("navbar").style.top = "0";
  }
};

// 监听窗口大小变化，重置滚动状态
window.onresize = function() {
  prevScrollpos = window.pageYOffset;
  if (document.documentElement.clientWidth >= 600) {
    document.getElementById("navbar").style.top = "0";
  }
};
</script>

问题2：嵌套第二个div后功能停止工作 #

看你给出的嵌套代码，首先发现一个关键错误：HTML的id属性不能包含空格，你写的id="second div-id"是无效的，浏览器会把它解析成两个混乱的属性，这会直接导致样式或脚本逻辑异常。

先修正这个id，同时调整导航栏的CSS确保高度稳定：

修正后的HTML嵌套结构 #

<div id="navbar">
  <a href="#home">Home</a>
  <div id="second-div-id"> <!-- 把空格替换成连字符，符合id命名规范 -->
    <a href="#home">Home</a>
  </div>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

优化后的CSS（确保导航栏高度稳定） #

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  height: 50px; /* 固定高度，和隐藏时的top值对应 */
  overflow: hidden; /* 避免内部元素超出导航栏范围 */
}

这样嵌套div后，导航栏的高度保持稳定，隐藏逻辑就能正常触发了。

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