请教：实现导航栏下滑隐藏、上滑显绿色、顶部背景透明的方法

Hey there! Let's get your navigation bar behaving exactly how you want it—with the right background colors for different scroll states, alongside the show/hide functionality you already have.

Step 1: Update the JavaScript Logic #

Your current code handles the basic show/hide on scroll, but we need to add checks for scroll position to toggle the background color. Replace your existing window.onscroll function with this:

let prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  const currentScrollPos = window.pageYOffset;
  const navbar = document.getElementById("navbar");

  // When at the very top of the page: keep navbar visible with transparent background
  if (currentScrollPos === 0) {
    navbar.style.top = "0";
    navbar.classList.remove("navbar-green");
    navbar.style.backgroundColor = "transparent";
  } 
  // When scrolling up (and not at the top): show navbar with green background
  else if (prevScrollpos > currentScrollPos) {
    navbar.style.top = "0";
    navbar.classList.add("navbar-green");
  } 
  // When scrolling down: hide navbar entirely
  else {
    navbar.style.top = "-150px";
    navbar.classList.remove("navbar-green");
  }

  prevScrollpos = currentScrollPos;
}

Step 2: Add CSS for Smooth Transitions & Styles #

You'll need some basic CSS to set the initial transparent state, define the green background, and make all transitions smooth. Add this to your stylesheet:

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  transition: all 0.3s ease-in-out; /* Makes show/hide and color changes smooth */
  background-color: transparent; /* Start with transparent background */
}

.navbar-green {
  background-color: #27ae60; /* Swap this with your preferred green shade */
}

Breakdown of the Changes #

• Page top state: The navbar stays visible with a transparent background, matching your requirement.
• Scrolling up: The navbar slides back into view with a solid green background.
• Scrolling down: The navbar hides itself, and we clear the green class to reset its state for next time.
• The transition property ensures all style changes (position and background color) animate smoothly instead of jumping abruptly.

Quick Tweaks to Note #

• Adjust the -150px value in the JS to match your navbar's actual height if it doesn't hide completely.
• Swap the hex code #27ae60 with any green shade that fits your design.
• If your navbar already has a fixed position in existing CSS, you can skip adding that line again.

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