Wie kann ich mit JavaScript den Hervorhebungseffekt erzielen, indem ich das Navigationsmenü an eine bestimmte Position scrolle?

Wie verwende ich JavaScript, um den Hervorhebungseffekt zu erzielen, der entsteht, wenn das Navigationsmenü an eine bestimmte Position gescrollt wird?

Navigationsmenü ist eine der häufigsten Komponenten im Webdesign. Um das Benutzererlebnis zu verbessern, können wir JavaScript verwenden, um den Hervorhebungseffekt zu erzielen, wenn das Navigationsmenü zu einer bestimmten Position scrollt. Auf diese Weise wird das Navigationsmenü beim Scrollen des Benutzers durch die Seite in Echtzeit aktualisiert und zeigt den aktuellen Standort an.

Der Schlüssel zum Erreichen dieses Effekts besteht darin, das Seiten-Scroll-Ereignis zu überwachen und die Beziehung zwischen der aktuellen Scroll-Position und der angegebenen Position zu bestimmen. Im Folgenden veranschaulichen wir anhand eines konkreten Beispielcodes, wie dies implementiert wird.

Zuerst müssen wir ein Navigationsmenü in HTML definieren und jedem Navigationselement einen Klassennamen (z. B. „nav-item“) und ein benutzerdefiniertes Attribut (z. B. „data-target“) hinzufügen, um das Navigationselement anzugeben entsprechenden Zielort.

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

Als nächstes schreiben wir JavaScript-Code, um den Hervorhebungseffekt beim Scrollen des Navigationsmenüs zur angegebenen Position zu realisieren.

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

Im obigen Code verwenden wir zunächst die Methode querySelectorAll, um alle Navigationselemente abzurufen, und hören zu, wie die Seite durch das Ereignis scroll scrollt. In der Rückruffunktion des Scroll-Ereignisses ermitteln wir die vertikale Position des aktuellen Seitenscrolls und durchlaufen jedes Navigationselement. querySelectorAll 方法获取所有的导航项，并通过 scroll 事件监听页面滚动。在滚动事件的回调函数中，我们获取当前页面滚动的垂直位置，并遍历每一个导航项。

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

Für jedes Navigationselement erhalten wir seine entsprechende Zielposition über die Methode getAttribute und die vertikale Position der Zielposition über das Attribut offsetTop. Dann ermitteln wir, ob die aktuelle Bildlaufposition über der Zielposition liegt. Wenn ja, entfernen Sie den Hervorhebungsstil.

Schließlich können wir den Hervorhebungsstil von Navigationselementen über CSS definieren, um den aktuellen Standort widerzuspiegeln.

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

Mit dem obigen Codebeispiel können wir ein einfaches Navigationsmenü implementieren, das zum Hervorhebungseffekt der angegebenen Position scrollt. Wenn der Benutzer auf der Seite scrollt, wird das Navigationsmenü auf diese Weise in Echtzeit aktualisiert, um den Benutzer besser beim Navigieren und Durchsuchen auf der Seite anzuleiten. 🎜

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript den Hervorhebungseffekt erzielen, indem ich das Navigationsmenü an eine bestimmte Position scrolle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!