滚动后导航链接悬停下划线未变色问题排查（CSS/JavaScript）

Hey Nicole, let's get this navigation hover effect working correctly! After reviewing your code, there are three main issues preventing the underline color from switching when the nav becomes sticky:

1. Incorrect CSS Selectors #

Your current CSS for the sticky state has invalid selector syntax. The sticky class is applied directly to the .nav__link elements, so your selectors need to target that combination properly, not nested elements that don't exist.

Wrong Selectors: #

.nav__link.sticky a { /* Targets an <a> inside .nav__link.sticky—your .nav__link is already the <a>! */ }
.nav__link::after.sticky a { /* Pseudo-element position is wrong, plus invalid nested target */ }
.nav__link:hover::after.sticky a { /* Same syntax error here */ }

Corrected CSS: #

/* Base styles for nav links */
.nav__link {
  margin-right: 1em;
  font-size: 1em;
  color: #000;
  text-decoration: none;
  transition: color 0.4s; /* Keep smooth transition for text color */
  display: inline-block;
  position: relative; /* Ensures pseudo-element stays anchored to the link */
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #000;
  transition: width 0.3s, background-color 0.4s; /* Add transition for underline color */
}

.nav__link:hover::after {
  width: 100%;
}

/* Sticky state styles */
.nav__link.sticky {
  color: #fff; /* Switch text to white */
}

.nav__link.sticky::after {
  background-color: #fff; /* Switch underline to white */
}

I added position: relative to .nav__link and position: absolute to the pseudo-element to avoid unexpected layout shifts when the underline expands.

2. JavaScript Only Targets the First Nav Link #

document.querySelector('.nav__link') only selects the first matching element. You need to use document.querySelectorAll('.nav__link') to grab all navigation links, then loop through them to add/remove the sticky class.

3. Missing Scroll Event Listener #

Your JS code needs to run every time the user scrolls, not just once on page load. Wrap it in a scroll event listener to trigger updates as the user moves down the page.

Corrected JavaScript: #

// Function to handle sticky nav state updates
function updateStickyNav() {
  const scrollPosition = window.scrollY;
  const navLinks = document.querySelectorAll('.nav__link');
  
  navLinks.forEach(link => {
    if (scrollPosition > 100) {
      link.classList.add('sticky');
    } else {
      link.classList.remove('sticky');
    }
  });
}

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

// Run every time the user scrolls
window.addEventListener('scroll', updateStickyNav);

How This Works #

• When the user scrolls past 100px, all .nav__link elements get the sticky class added.
• The CSS instantly updates both the text color and the pseudo-element's background color to white, with smooth transitions.
• Hovering still triggers the underline to expand to 100% width, and the color will automatically match the current text color (black when not sticky, white when sticky).

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