js+滚动切换导航

<!-- HTML -->
<nav id="navbar">
  <a href="#section1" class="nav-link">Section 1</a>
  <a href="#section2" class="nav-link">Section 2</a>
  <a href="#section3" class="nav-link">Section 3</a>
</nav>

<section id="section1" class="section">Section 1 content...</section>
<section id="section2" class="section">Section 2 content...</section>
<section id="section3" class="section">Section 3 content...</section>

/* CSS */
#navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

.nav-link {
  margin-right: 10px;
}

.nav-link.active {
  color: red; /* 高亮样式 */
}

.section {
  height: 100vh; /* 每个区域高度为视口高度 */
  padding-top: 50px; /* 为固定导航栏留出空间 */
}

// JavaScript
function throttle(func, wait) {
  let timeout = null;
  return function() {
    if (!timeout) {
      timeout = setTimeout(() => {
        func.apply(this, arguments);
        timeout = null;
      }, wait);
    }
  };
}

function handleScroll() {
  const scrollPosition = window.scrollY;
  let current = '';

  const sections = document.querySelectorAll('.section');
  sections.forEach(section => {
    const sectionTop = section.offsetTop - 70; // 考虑导航栏高度
    if (scrollPosition >= sectionTop) {
      current = section.getAttribute('id');
    }
  });

  const navLinks = document.querySelectorAll('.nav-link');
  navLinks.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href').substring(1) === current) {
      link.classList.add('active');
    }
  });
}

window.addEventListener('scroll', throttle(handleScroll, 200));