粘性导航栏需求：当前及历史菜单项底部边框同时激活高亮

Got it, let's tackle this! You want your navigation to keep all previous menu items active when the user is on a later section (e.g., both "Call Data" and "Source" are active when viewing the Source section). This is a common "step indicator" pattern, and here's how to implement it with your existing code:

Step 1: Confirm Your Page Sections Exist #

First, make sure you have corresponding sections on your page for each nav link (you probably already do, but just to confirm the structure):

<!-- Example sections matching your nav links -->
<section id="call-data">...</section>
<section id="source">...</section>
<section id="lead">...</section>
<section id="address">...</section>
<section id="motivation">...</section>
<section id="property">...</section>
<section id="visit">...</section>
<section id="finish">...</section>

Step 2: Add JavaScript to Handle Scroll & Active States #

We'll use JavaScript to detect which section is currently in view, then apply the active class to all nav items up to that section. Add this script right before your closing </body> tag:

// Get all nav links and corresponding page sections
const navLinks = document.querySelectorAll('.nav ul li a');
const sections = document.querySelectorAll('section[id]');

// Function to update active nav items based on scroll position
function updateActiveNav() {
  // Get current scroll position, adjust for sticky nav height
  const scrollPosition = window.pageYOffset;
  
  // Loop through each section to find the one in view
  sections.forEach((section, sectionIndex) => {
    const sectionTop = section.offsetTop - 70; // Tweak this number to match your nav's height
    const sectionHeight = section.offsetHeight;
    
    // Check if we're scrolling within this section's bounds
    if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
      // First, remove active class from all links
      navLinks.forEach(link => link.classList.remove('active'));
      
      // Add active class to current link and all previous ones
      for (let i = 0; i <= sectionIndex; i++) {
        navLinks[i].classList.add('active');
      }
    }
  });
}

// Set initial active state when page loads
window.addEventListener('load', updateActiveNav);
// Update active state as user scrolls
window.addEventListener('scroll', updateActiveNav);

Step 3: Tweak CSS for Consistent Hover Behavior #

Your existing CSS for .nav a.active is already good, but to prevent hover styles from overriding the active state, adjust the hover selector like this:

.nav a:hover:not(.active) {
  color: green;
  border-bottom: 3px solid green;
}

How It Works #

• The script listens for both page load and scroll events to keep the nav in sync with the user's position.
• The sectionTop - 70 offset ensures the active state updates right when the section reaches the bottom of your sticky nav (adjust this number if your nav is taller/shorter).
• When a section is in view, it adds the active class to all nav links from the first item up to the current section, and removes it from any links after that.

Bonus: Mobile Menu Sync #

If you want the responsive mobile menu to also show the progressive active state, update your myFunction() to re-run the state update after toggling the menu:

function myFunction() {
  const nav = document.getElementById("myNav");
  nav.classList.toggle("responsive");
  updateActiveNav(); // Add this line to sync active states
}

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