Comment utiliser JavaScript pour obtenir l'effet de surbrillance en faisant défiler le menu de navigation jusqu'à une position spécifiée ?

Comment utiliser JavaScript pour obtenir l'effet de surbrillance en faisant défiler le menu de navigation jusqu'à une position spécifiée ?

Le menu de navigation est l'un des composants courants dans la conception Web Afin d'améliorer l'expérience utilisateur, nous pouvons utiliser JavaScript pour obtenir l'effet de surbrillance lorsque le menu de navigation défile vers une position spécifiée. De cette façon, au fur et à mesure que l'utilisateur fait défiler la page, le menu de navigation se mettra à jour en temps réel pour afficher l'emplacement actuel.

La clé pour obtenir cet effet est de surveiller l'événement de défilement de page et de déterminer la relation entre la position de défilement actuelle et la position spécifiée. Ci-dessous, nous illustrerons comment implémenter cela à travers un exemple de code spécifique.

Tout d'abord, nous devons définir un menu de navigation en HTML et ajouter un nom de classe (tel que "nav-item") et un attribut personnalisé (tel que "data-target") à chaque élément de navigation pour spécifier l'élément de navigation. emplacement cible correspondant.

<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>

Ensuite, nous écrivons du code JavaScript pour réaliser l'effet de surbrillance du défilement du menu de navigation jusqu'à la position spécifiée.

// 获取导航菜单中的所有导航项
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');
    }
  });
});

Dans le code ci-dessus, nous utilisons d'abord la méthode querySelectorAll pour obtenir tous les éléments de navigation et écoutons la page défiler à travers l'événement scroll. Dans la fonction de rappel de l'événement scroll, nous obtenons la position verticale du défilement de la page en cours et parcourons chaque élément de navigation. querySelectorAll 方法获取所有的导航项，并通过 scroll 事件监听页面滚动。在滚动事件的回调函数中，我们获取当前页面滚动的垂直位置，并遍历每一个导航项。

对于每一个导航项，我们通过 getAttribute 方法获取其对应的目标位置，并通过 offsetTop

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!