如何在使用id滚动页面时更改菜单的活动类

window.onscroll = function() {
  var sections = document.querySelectorAll('section'); // 获取所有的section元素
  var menuItems = document.querySelectorAll('.menu-item'); // 获取菜单项的DOM元素

  var currentSectionId = null; // 当前滚动位置的id

  // 遍历所有的section元素，判断当前滚动位置处于哪个元素的范围内
  for (var i = 0; i < sections.length; i++) {
    var section = sections[i];
    var rect = section.getBoundingClientRect();

    if (rect.top <= 0 && rect.bottom > 0) {
      currentSectionId = section.id;
      break;
    }
  }

  // 根据当前滚动位置的id，更改菜单的活动类
  for (var i = 0; i < menuItems.length; i++) {
    var menuItem = menuItems[i];
    var menuItemId = menuItem.getAttribute('data-section-id');

    if (menuItemId === currentSectionId) {
      menuItem.classList.add('active');
    } else {
      menuItem.classList.remove('active');
    }
  }
};

<ul class="menu">
  <li class="menu-item" data-section-id="section1">Section 1</li>
  <li class="menu-item" data-section-id="section2">Section 2</li>
  <li class="menu-item" data-section-id="section3">Section 3</li>
  <!-- 其他菜单项 -->
</ul>