每当我滚动浏览该部分时，是否突出显示导航栏菜单项？仅使用Javascript

// 获取导航栏菜单项的DOM元素
const menuItems = document.querySelectorAll('.menu-item');

// 监听滚动事件
window.addEventListener('scroll', () => {
  // 获取当前滚动的垂直位置
  const scrollPosition = window.scrollY;

  // 遍历每个菜单项
  menuItems.forEach((menuItem) => {
    // 获取当前菜单项对应的目标元素
    const targetElementId = menuItem.getAttribute('data-target');
    const targetElement = document.getElementById(targetElementId);

    // 获取目标元素的位置信息
    const targetElementTop = targetElement.offsetTop;
    const targetElementBottom = targetElementTop + targetElement.offsetHeight;

    // 判断当前滚动位置是否在目标元素范围内
    if (scrollPosition >= targetElementTop && scrollPosition < targetElementBottom) {
      // 添加突出显示的样式
      menuItem.classList.add('active');
    } else {
      // 移除突出显示的样式
      menuItem.classList.remove('active');
    }
  });
});

<nav>
  <ul>
    <li class="menu-item" data-target="section1">Section 1</li>
    <li class="menu-item" data-target="section2">Section 2</li>
    <li class="menu-item" data-target="section3">Section 3</li>
  </ul>
</nav>