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

Pour chaque élément de navigation, nous obtenons sa position cible correspondante via la méthode getAttribute, et obtenons la position verticale de la position cible via l'attribut offsetTop. Ensuite, nous déterminons si la position de défilement actuelle est au-dessus de la position cible. Si tel est le cas, supprimez le style de surbrillance ; sinon, ajoutez le style de surbrillance.

Enfin, nous pouvons définir le style de mise en évidence des éléments de navigation via CSS pour refléter l'emplacement actuel.

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

Avec l'exemple de code ci-dessus, nous pouvons implémenter un simple menu de navigation défilant jusqu'à l'effet de surbrillance de position spécifié. De cette manière, lorsque l'utilisateur fera défiler la page, le menu de navigation sera mis à jour en temps réel pour mieux guider l'utilisateur dans sa navigation et sa navigation dans la page. 🎜

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!