How to use JavaScript to achieve the highlight effect of scrolling the navigation menu to a specified position?

How to use JavaScript to achieve the highlight effect of scrolling the navigation menu to a specified position?

Navigation menu is one of the common components in web design. In order to improve the user experience, we can use JavaScript to achieve the highlighting effect when the navigation menu scrolls to a specified position. In this way, as the user scrolls through the page, the navigation menu will update in real time to show the current location.

The key to achieving this effect is to monitor the page scroll event and determine the relationship between the current scroll position and the specified position. Below, we will illustrate how to implement this through specific example code.

First, we need to define a navigation menu in HTML and add a class name (such as "nav-item") and a custom attribute (such as "data-target") to each navigation item. Specify the target location corresponding to this navigation item.

<nav>
  <ul>
    <li class="nav-item" data-target="section1">导航项1</li>
    <li class="nav-item" data-target="section2">导航项2</li>
    <li class="nav-item" data-target="section3">导航项3</li>
  </ul>
</nav>

<section id="section1">内容1</section>
<section id="section2">内容2</section>
<section id="section3">内容3</section>

Next, we write JavaScript code to realize the highlighting effect of scrolling the navigation menu to the specified position.

// 获取导航菜单中的所有导航项
const navItems = document.querySelectorAll('.nav-item');

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

  // 遍历导航项
  navItems.forEach(navItem => {
    // 获取该导航项对应的目标位置
    const target = navItem.getAttribute('data-target');

    // 获取目标位置的垂直位置
    const targetPosition = document.getElementById(target).offsetTop;

    // 判断当前滚动位置是否在目标位置的上方
    if (scrollPosition < targetPosition) {
      // 移除高亮样式
      navItem.classList.remove('active');
    } else {
      // 添加高亮样式
      navItem.classList.add('active');
    }
  });
});

In the above code, we first use the querySelectorAll method to obtain all navigation items, and listen to the page scrolling through the scroll event. In the callback function of the scroll event, we obtain the vertical position of the current page scroll and traverse each navigation item.

For each navigation item, we obtain its corresponding target position through the getAttribute method, and obtain the vertical position of the target position through the offsetTop attribute. Then, we determine whether the current scroll position is above the target position. If so, remove the highlight style; if not, add the highlight style.

Finally, we can define the highlighting style of the navigation item through CSS to reflect the current location.

.nav-item.active {
  color: red;
  font-weight: bold;
}

Through the above code example, we can achieve a simple navigation menu scrolling to the specified position highlighting effect. In this way, when the user scrolls in the page, the navigation menu will be updated in real time to better guide the user to navigate and browse in the page.

The above is the detailed content of How to use JavaScript to achieve the highlight effect of scrolling the navigation menu to a specified position?. For more information, please follow other related articles on the PHP Chinese website!