滚动时导航菜单颜色更改及页面滑动时菜单文本颜色变更实现方法问询（参考https://markus.se/）

Great question! This is such a popular pattern for creating polished, user-friendly navigation—let’s break this down step by step to achieve exactly what you’re looking for, including the section-specific color shift effect you referenced.

Step 1: Lay the Groundwork with HTML #

First, we’ll set up a fixed navigation bar and page sections that act as color triggers. Each section will have a data attribute defining what color the nav text should switch to when that section is in view:

<!-- Fixed Navigation Bar -->
<nav class="site-nav">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<!-- Page Sections with Color Instructions -->
<section id="home" data-nav-color="#ffffff">
  <!-- Home section content -->
</section>
<section id="about" data-nav-color="#000000">
  <!-- About section content -->
</section>
<section id="projects" data-nav-color="#ffffff">
  <!-- Projects section content -->
</section>
<section id="contact" data-nav-color="#000000">
  <!-- Contact section content -->
</section>

Step 2: Style the Nav with CSS Variables #

Using CSS variables makes dynamic color updates super clean—no need to rewrite entire style rules. We’ll set a default color and add a smooth transition for the color shift:

.site-nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1.2rem;
  /* Default navigation text color */
  --nav-text-color: #ffffff;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  margin: 0;
}

.site-nav a {
  color: var(--nav-text-color);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  transition: color 0.3s ease-in-out; /* Smooth color transition */
}

/* Add top padding to body so content doesn't hide under fixed nav */
body {
  padding-top: 70px; /* Adjust to match your nav's height */
}

Step 3: Add JavaScript to Detect Scroll and Update Colors #

Scroll events fire constantly, so we’ll use a throttle function to avoid performance hits. Then we’ll check which section is in the viewport and update the nav’s color accordingly:

// Throttle function to limit how often we run scroll logic (prevents lag)
function throttle(func, limit) {
  let isThrottling;
  return function() {
    const context = this;
    const args = arguments;
    if (!isThrottling) {
      func.apply(context, args);
      isThrottling = true;
      setTimeout(() => isThrottling = false, limit);
    }
  }
}

// Function to update nav color based on active section
function updateNavColor() {
  const sections = document.querySelectorAll('section');
  const nav = document.querySelector('.site-nav');

  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.offsetHeight;
    // Trigger color change when the section is 100px from the top of the viewport
    if (window.scrollY >= sectionTop - 100 && window.scrollY < sectionTop + sectionHeight - 100) {
      const targetColor = section.getAttribute('data-nav-color');
      nav.style.setProperty('--nav-text-color', targetColor);
    }
  });
}

// Attach throttled scroll listener
window.addEventListener('scroll', throttle(updateNavColor, 100));

// Run once on page load to set initial color
updateNavColor();

Quick Polishing Tips #

• Adjust the 100 value in the scroll check to tweak when the color switch happens (smaller = earlier shift, larger = later)
• Ensure your nav text color has enough contrast with the section background for accessibility
• If you want to change the nav background color too, just add another CSS variable (e.g., --nav-bg-color) and update it the same way

That’s all there is to it! This setup will automatically switch your navigation’s text color as you scroll through different sections, matching the smooth, polished effect you’re aiming for.

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