如何使用jQuery根据背景区域改变导航栏文字颜色？

Got it, let's walk through exactly how to build this effect—just like the one you mentioned where the navigation text turns white when scrolling into a dark section. This is a super common pattern, and jQuery makes it straightforward to implement reliably.

Step 1: Set Up Your HTML Structure #

First, lay out the basic elements: a fixed navigation bar, and sections with alternating light/dark backgrounds.

<nav class="main-nav">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<section id="home" class="section light-bg">
  <h1>Light Background Section</h1>
</section>
<section id="about" class="section dark-bg">
  <h1>Dark Background Section</h1>
</section>
<section id="services" class="section light-bg">
  <h1>Another Light Section</h1>
</section>
<section id="contact" class="section dark-bg">
  <h1>Another Dark Section</h1>
</section>

Step 2: Base CSS Styles #

Style the navigation to stay fixed at the top, set default text colors, and add smooth transitions for the color change.

/* Navigation styles */
.main-nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1.2rem 2rem;
  background-color: transparent; /* Keep nav background transparent for the effect */
  transition: all 0.3s ease; /* Smooth color transition */
}

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

.main-nav a {
  color: #2d2d2d; /* Default dark text for light backgrounds */
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
}

/* Class to switch text to white */
.main-nav.white-text a {
  color: #ffffff;
}

/* Section styles */
.section {
  height: 100vh; /* Make each section full viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
}

.light-bg {
  background-color: #f8f9fa;
}

.dark-bg {
  background-color: #1a1a1a;
  color: #fff; /* Optional: Make section text white too */
}

Step 3: jQuery Logic to Handle Scroll & Color Switch #

This is the core part—listen for scroll events, check which section the navigation is currently "over", and toggle the text color class accordingly.

$(document).ready(function() {
  // Cache elements for better performance
  const $nav = $('.main-nav');
  const $sections = $('.section');
  const navHeight = $nav.outerHeight(); // Get navigation bar height

  // Function to update navigation text color
  function updateNavColor() {
    const scrollPosition = $(window).scrollTop();

    // Loop through each section to check if we're scrolling over it
    $sections.each(function() {
      const $section = $(this);
      const sectionTop = $section.offset().top - navHeight;
      const sectionBottom = sectionTop + $section.outerHeight();
      const isDarkSection = $section.hasClass('dark-bg');

      // If current scroll position is within this section's bounds
      if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
        if (isDarkSection) {
          $nav.addClass('white-text');
        } else {
          $nav.removeClass('white-text');
        }
        return false; // Exit loop once we find the current section
      }
    });
  }

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

  // Run on scroll (with throttle to avoid performance issues)
  $(window).scroll(function() {
    // Throttle the function to run every 100ms
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
      updateNavColor();
    }, 100));
  });
});

How This Works: #

1. Caching Elements: We store the navigation and sections in variables so jQuery doesn't re-select them every scroll—this boosts performance.
2. Scroll Position Check: Calculate the top and bottom bounds of each section, adjusting for the navigation's height (since it's fixed at the top).
3. Toggle Class: When the scroll position falls within a dark background section, add the white-text class to the navigation; otherwise, remove it.
4. Throttling: The scroll event fires constantly, so we add a 100ms delay to prevent the function from running too often, keeping the page smooth.

Optional Enhancements #

• Add Navigation Background: Extend the white-text class or add a new class to switch the navigation's background color (e.g., dark background over light sections).
• Animate Background: Add a background-color transition to the .main-nav class for a smoother look when switching backgrounds.

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