滚动隐藏导航栏仍有部分残留问题求助

我是编程新手，正在实现向下滚动隐藏、向上滚动显示的导航栏功能。按教程操作后功能可用，但导航栏隐藏时仍有部分留在屏幕上，可通过以下代码复现问题：

原代码 #

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="testcss.css">

<body class="noscroll">
  <div class="banner" id="Home">
    <div class="navbar">
      <header class="navbar">
        <h1 class="logo" style="font-size: 50px; text-decoration: underline; text-decoration-color: #B575B3; ">Networks</h1>
        <ul>
          <li><a href="#Home">Home</a></li>
          <li><a href="#Networks">Networks</a></li>
          <li><a href="#Issues">Issues and Communication</a></li>
          <li><a href="#Useful">Useful Links</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </header>
    </div>
  </div>
  <div class="banner2"></div>

  <script src="main.js"></script>
  <script>
    const body = document.body;
    let lastScroll = 0;

    window.addEventListener('scroll', () => {
      const currentScroll = window.pageYOffset

      if (currentScroll <= 0) {
        body.classList.remove("scroll-up")
      }

      if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
        body.classList.remove("scroll-up")
        body.classList.add("scroll-down")
      }

      if (currentScroll < lastScroll && body.classList.contains("scroll-down")) {
        body.classList.remove("scroll-down")
        body.classList.add("scroll-up")
      }
      lastScroll = currentScroll;
    })
  </script>
</body>
</html>

CSS

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
* {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

.noscroll::-webkit-scrollbar {
  display: none;
}

.banner {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../Images/home banner.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.navbar {
  width: 100%;
  margin: auto;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: all 300ms ease-in-out;
  background-color: red;
}

.logo {
  width: 120px;
  cursor: pointer;
  color: white;
  margin-left: 115px;
}

.logo h1 {
  text-decoration: underline;
  text-decoration-color: #B575B3;
}

.navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 0 20px;
  position: relative;
}

.navbar ul li a {
  text-decoration: none;
  color: white;
  text-transform: uppercase;
}

.navbar ul li::after {
  content: '';
  height: 3px;
  width: 0;
  background: #89D7FF;
  position: absolute;
  left: 0;
  bottom: -5px;
  transition: 0.3s;
}

.navbar ul li:hover::after {
  width: 100%;
}

.scroll-down header {
  transform: translate3d(0, -100%, 0);
}

.scroll-up header {
  filter: drop-shadow(0 -10px 20px rgb(64, 63, 63));
}

.banner2 {
  width: 100vw;
  height: 1000vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../Images/1560126.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

JS

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener("click", function(e) {
    e.preventDefault();
    document.querySelector(this.getAttribute("href")).scrollIntoView({
      behavior: "smooth"
    });
  });
});

问题根源 #

你的HTML结构嵌套了两层带.navbar类的元素：外层<div class="navbar">和内层<header class="navbar">。CSS中.scroll-down header仅对内层header生效，将其移出屏幕，但外层div.navbar仍固定在顶部（带padding和背景色），导致残留红色条块。

修复步骤 #

1. 移除多余的外层.navbar div，仅保留<header class="navbar">作为导航容器
2. 调整CSS滚动相关选择器，直接作用于.navbar而非header

修改后的代码 #

调整后的HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" href="testcss.css">
</head>
<body class="noscroll">
  <div class="banner" id="Home">
    <!-- 移除外层多余的.navbar div -->
    <header class="navbar">
      <h1 class="logo" style="font-size: 50px; text-decoration: underline; text-decoration-color: #B575B3; ">Networks</h1>
      <ul>
        <li><a href="#Home">Home</a></li>
        <li><a href="#Networks">Networks</a></li>
        <li><a href="#Issues">Issues and Communication</a></li>
        <li><a href="#Useful">Useful Links</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </header>
  </div>
  <div class="banner2"></div>

  <script src="main.js"></script>
  <script>
    const body = document.body;
    let lastScroll = 0;

    window.addEventListener('scroll', () => {
      const currentScroll = window.pageYOffset

      if (currentScroll <= 0) {
        body.classList.remove("scroll-up")
      }

      if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
        body.classList.remove("scroll-up")
        body.classList.add("scroll-down")
      }

      if (currentScroll < lastScroll && body.classList.contains("scroll-down")) {
        body.classList.remove("scroll-down")
        body.classList.add("scroll-up")
      }
      lastScroll = currentScroll;
    })
  </script>
</body>
</html>

调整后的CSS（仅修改滚动相关样式）

/* 替换原scroll-down和scroll-up样式 */
.scroll-down .navbar {
  transform: translate3d(0, -100%, 0);
}

.scroll-up .navbar {
  filter: drop-shadow(0 -10px 20px rgb(64, 63, 63));
}

其他CSS、JS代码保持不变即可。修改后，滚动时整个导航栏会完整移出/移入屏幕，不会再残留部分元素。

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