解决下滑式Navbar与Hero区域导航栏重叠问题

Got it, let's sort out this navbar problem. The main issues here are that your fixed 250px scroll trigger doesn't match your full-height Hero section, and fast scrolling causes the navbar to lag when hiding/showing—leading to that annoying overlap.

We'll fix this by using a dynamic trigger based on your Hero's height, plus a small optimization to handle fast scrolls smoothly. Here's the complete revised code:

Revised Full Code #

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Added an ID to the Hero section so we can calculate its height dynamically -->
<div id="hero" style="height: 100vh; width: 100vw;">hero</div>
<div id="navbar">
  <div class="header__main2">
    <nav class="header__menu2">
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
    </nav>
  </div>
</div>
<div style="height: 900px;">section 2</div>

CSS (No changes needed—keep your existing styles) #

#navbar {
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 100;
  border-bottom: 1px solid #000;
  background: rgba(0,0,0,.9);
  position: fixed;
  top: -90px;
  width: 100%;
  height: 90px;
  display:block;
  transition: top .5s cubic-bezier(.5,.25,.015,1) 0s, opacity .5s cubic-bezier(.5,.25,.015,1) 0s,height .5s cubic-bezier(.5,.25,.015,1) 0s;
}
#navbar .header__menu2 {
  float: right;
  display: inline-block;
  height: 90px;
  padding-top: 32px;
  vertical-align: middle;
  font-family: "nimbus-sans-condensed" , sans-serif;
  font-weight: 400;
  font-size: 18px;
  text-transform: uppercase;
}
#navbar .header__menu2 {
  padding-right: 15px;
}
#navbar .header__menu2 a {
  color: #a3a3a3;
  line-height: 24px;
  display: inline-block;
  margin-left: 15px;
  text-decoration: none;
}
#navbar .header__menu2 a:hover {
  color: #e1382c;
}

JavaScript (Core Fixes Here) #

// Grab our key elements
const heroSection = document.getElementById('hero');
const navbar = document.getElementById('navbar');
// Calculate trigger point: exactly half the height of the Hero section
const scrollTrigger = heroSection.offsetHeight / 2;

// Debounce function to prevent excessive scroll event firing (fixes fast scroll lag)
function debounce(func, delay = 80) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

function updateNavbarVisibility() {
  "use strict";
  // Get current scroll position (works reliably across browsers)
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
  
  // Show navbar when scrolled past Hero's midpoint; hide otherwise
  if (currentScroll > scrollTrigger) {
    navbar.style.top = "0";
  } else {
    navbar.style.top = "-90px";
  }
}

// Bind the debounced function to scroll event for smooth, efficient behavior
window.onscroll = debounce(updateNavbarVisibility);

What Changed & Why #

• Dynamic Trigger Point: Instead of a hardcoded 250px, we calculate the trigger as half the Hero's height. This ensures the navbar shows/hides exactly at the middle of your Hero section, no matter what screen size you're on.
• Debounce Optimization: The debounce function limits how often the navbar updates during scrolls. This fixes the lag you saw with fast scrolling, and also improves performance by reducing unnecessary function calls.
• Reliable Scroll Position: Using window.pageYOffset ensures we get the correct scroll height across all modern browsers, avoiding inconsistencies that could cause misalignment.

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