动态导航栏滚动显示/隐藏功能失效求助（附完整代码）

你的代码存在三个关键问题导致功能无法正常运行，以下是具体修正方案：

1. DOM元素获取错误 #

document.getElementsByTagName("nav")返回的是元素集合（HTMLCollection），不是单个DOM元素，直接调用.style会触发报错。必须通过索引[0]获取唯一的nav元素。

2. 隐藏距离与导航栏高度不匹配 #

你的nav高度设置为100px，但隐藏时仅设置top: -50px，只能向上移动一半距离，无法完全隐藏导航栏。需将隐藏值改为-100px，与nav的高度保持一致。

3. 脚本执行时机过早 #

脚本放在<head>标签中时，DOM还未完全加载完成，此时获取nav元素可能返回undefined。需将脚本移至<body>末尾，确保DOM加载完成后再执行JS代码。

修正后的完整代码 #

HTML（调整脚本位置）

<!DOCTYPE html>
<html>
  <head>
    <title>DanielTSutton</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap" rel="stylesheet">
  </head>
  <body>
    <nav>
        <div class="logo">DANIEL SUTTON_</div>
        <ul>
            <li><a href="#about" class="menu-item">About</a></li>
            <li><a href="#skills"class="menu-item">Skills</a></li>
            <li><a href="#projects"class="menu-item">Projects</a></li>
            <li><a href="#contact"class="menu-item">Contact</a></li>
        </ul>
    </nav>
    <div class="container">
        <div id="about">
            <span class="about-bg"></span>
        </div> 
        <div id="skills"></div>
        <div id="projects"></div>
        <div id="contact"></div>
    </div>
    <!-- 将脚本移至body末尾，确保DOM加载完成 -->
    <script type="text/javascript" src="/js/main.js"></script>
  </body>
</html>

JavaScript（修正元素获取和隐藏距离）

/* 滚动时隐藏/显示导航栏 */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  // 获取第一个nav元素
  const nav = document.getElementsByTagName("nav")[0];
  if (prevScrollpos > currentScrollPos) {
    nav.style.top = "0";
  } else {
    // 隐藏距离与nav高度一致
    nav.style.top = "-100px";
  }
  prevScrollpos = currentScrollPos;
}

CSS（可选：添加过渡动画优化体验）

nav {
    background-color: transparent;
    height: 100px;
    font-family: 'Josefin Sans', sans-serif;
    color: #FFFCF2;
    position: fixed;
    border-bottom: 0;
    width: 100%;
    /* 添加过渡动画，让显示/隐藏更流畅 */
    transition: top 0.3s ease;
    /* 初始位置设为0 */
    top: 0;
}

额外提示：可以用document.querySelector("nav")替代getElementsByTagName("nav")[0]，代码更简洁易读，功能完全一致。

内容的提问来源于stack exchange，提问作者Terrell-byte