实现二级导航栏（secondnav）滚动过顶后粘性定位

Got it, let's get that scroll-triggered sticky secondary navbar working smoothly! Here's a step-by-step implementation tailored to your existing code:

1. Keep Your Existing HTML Structure #

First, your current HTML is good to go—just make sure the id="secondnav" is correctly set so we can target it easily:

<div id="secondnav">
  <div class="topnav">
    <div class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="Search.." name="search">
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>
  </div>
</div>

2. Update Your CSS #

We'll extend your existing CSS with base styles for the navbar and a dedicated .sticky class that triggers the fixed position. I've filled in the missing bits of your original CSS too:

/* Your original CSS (completed) */
.topnav .search-container { 
  float: right; 
} 
.topnav input[type=text] { 
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}
.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
.topnav .search-container button:hover {
  background: #ccc;
}

/* New styles for sticky behavior */
#secondnav {
  /* Base styling for your navbar */
  background-color: #f1f1f1;
  padding: 10px 0;
  width: 100%;
  transition: all 0.3s ease; /* Smooth transition when sticking */
}

/* Sticky class that we'll toggle with JS */
#secondnav.sticky {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000; /* Ensures navbar stays above other content */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Adds depth */
}

3. Add JavaScript to Trigger Sticky on Scroll #

Native CSS position: sticky only works relative to its parent container, so we need a bit of JS to detect when the user has scrolled to the navbar's original position. This script will add/remove the .sticky class dynamically:

document.addEventListener('DOMContentLoaded', function() {
  const secondNav = document.getElementById('secondnav');
  const navOffset = secondNav.offsetTop; // Distance from top of page to navbar

  // Function to check scroll position and update navbar
  function toggleStickyNav() {
    if (window.scrollY >= navOffset) {
      secondNav.classList.add('sticky');
    } else {
      secondNav.classList.remove('sticky');
    }
  }

  // Listen for scroll events
  window.addEventListener('scroll', toggleStickyNav);
  
  // Run once on page load to check initial position
  toggleStickyNav();
});

Optional: Optimize Scroll Performance #

Scroll events fire frequently, so adding a throttle function can reduce unnecessary computations and improve performance:

// Throttle utility to limit how often the scroll function runs
function throttle(func, delay) {
  let isThrottled = false;
  return function() {
    if (!isThrottled) {
      func.apply(this, arguments);
      isThrottled = true;
      setTimeout(() => isThrottled = false, delay);
    }
  };
}

// Replace the scroll listener with the throttled version
window.addEventListener('scroll', throttle(toggleStickyNav, 100));

Quick Notes #

• If you have a fixed top navbar already, adjust the top value in the .sticky class (e.g., top: 60px) to avoid overlapping.
• Tweak the background color, padding, and shadow in the CSS to match your site's design.

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