问题排查：基于页面滚动位置高亮侧边菜单失效

Hey there, let's get that scroll-highlight feature working for your sidebar menu! I took a look at your code and spotted a couple of issues that are likely causing the problem, plus some tweaks to make the logic more reliable.

First: Fix the Obvious Typo #

The most immediate blocker is a tiny typo in your scroll handler: you wrote removeClas instead of removeClass (missing the final 's'). That's stopping the code from clearing the active class correctly when scrolling—such an easy slip-up, but it breaks the whole flow!

Second: Refine the Scroll Detection Logic #

Your current scroll check only looks at whether the window's scroll top is >= the element's top, but this can lead to incorrect highlighting when you scroll past multiple sections. We'll adjust the logic to find the last section that's entered the viewport (with a small offset for a smoother experience) and highlight its corresponding menu link.

Corrected Full Code #

// Handle menu item clicks
$('#sn').on('click', function(event) {
  event.preventDefault(); // Prevent default anchor jump if you want smooth scroll
  // Remove active class from all sibling links
  $(this).parent().find('a').removeClass('active');
  // Add active class to the clicked link
  $(this).addClass('active');
  
  // Optional: Add smooth scroll to the target section
  const targetId = $(this).attr('href');
  $('html, body').animate({
    scrollTop: $(targetId).offset().top
  }, 300);
});

// Reusable function to update active menu based on scroll position
function updateActiveMenu() {
  let currentSection = '';
  
  $('.target').each(function() {
    const sectionTop = $(this).offset().top;
    // Add a small offset to start highlighting the menu link early (adjust to your needs)
    const scrollTrigger = sectionTop - 100;
    
    // Update current section if we've scrolled past its trigger point
    if ($(window).scrollTop() >= scrollTrigger) {
      currentSection = $(this).attr('id');
    }
  });
  
  // Update active class on menu links
  $('#sn a').removeClass('active');
  if (currentSection) {
    $(`#sn a[href="#${currentSection}"]`).addClass('active');
  }
}

// Initialize active menu on page load
$(document).ready(function() {
  updateActiveMenu();
});

// Update active menu on scroll
$(window).on('scroll', function() {
  updateActiveMenu();
});

Key Improvements Explained: #

• Typo Fix: Corrected removeClas to removeClass so the active class is properly cleared between scroll events.
• Reusable Function: Moved the scroll logic into updateActiveMenu so we can call it both on page load and scroll—this ensures the correct menu link is highlighted right when the page loads, not just after scrolling.
• Smoother Trigger: Added a -100px offset to start highlighting the menu link a little before the section reaches the top of the viewport (tweak this number to match your design's needs).
• Optional Smooth Scroll: Added animated scrolling when clicking menu items for a more polished user experience.

Quick Checks: #

• Make sure your menu links use href="#section-id" that exactly matches the id of your .target sections.
• If you notice flicker during fast scrolling, add a throttle to the scroll event (e.g., wrap the updateActiveMenu call in a setTimeout with a 100ms delay) to limit how often the function runs.

内容的提问来源于stack exchange，提问作者Dr.PB