JavaScript を使用して、ナビゲーション メニューを指定した位置までスクロールするハイライト効果を実現するにはどうすればよいですか?

JavaScript を使用して、ナビゲーション メニューを指定した位置までスクロールするハイライト効果を実現するにはどうすればよいですか?

ナビゲーション メニューは、Web デザインの一般的なコンポーネントの 1 つです。ユーザー エクスペリエンスを向上させるために、JavaScript を使用して、ナビゲーション メニューが指定された位置にスクロールするときに強調表示効果を実現できます。このようにして、ユーザーがページをスクロールすると、ナビゲーション メニューがリアルタイムで更新され、現在の場所が表示されます。

この効果を実現する鍵は、ページ スクロール イベントを監視し、現在のスクロール位置と指定された位置の関係を判断することです。以下では、具体的なコード例を通じてこれを実装する方法を説明します。

まず、HTML でナビゲーション メニューを定義し、クラス名 (「nav-item」など) とカスタム属性 (「data-target」など) を各ナビゲーション項目に追加する必要があります。このナビゲーション項目に対応するターゲットの場所。

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

次に、ナビゲーション メニューを指定した位置までスクロールする強調表示効果を実現する JavaScript コードを記述します。

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

上記のコードでは、最初に querySelectorAll メソッドを使用してすべてのナビゲーション項目を取得し、scroll イベントを通じてページのスクロールを監視します。スクロール イベントのコールバック関数では、現在のページ スクロールの垂直位置を取得し、各ナビゲーション項目を移動します。

各ナビゲーション項目について、getAttribute メソッドを通じて対応するターゲット位置を取得し、offsetTop 属性を通じてターゲット位置の垂直位置を取得します。次に、現在のスクロール位置がターゲット位置より上かどうかを判断し、上にある場合はハイライト スタイルを削除し、そうでない場合はハイライト スタイルを追加します。

最後に、CSS を使用してナビゲーション項目の強調表示スタイルを定義し、現在の場所を反映できます。

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

上記のコード例を通じて、指定された位置までスクロールする簡単なナビゲーション メニューの強調表示効果を実現できます。このようにして、ユーザーがページ内をスクロールすると、ナビゲーション メニューがリアルタイムで更新され、ユーザーがページ内を移動して参照できるようにより適切にガイドされます。

以上がJavaScript を使用して、ナビゲーション メニューを指定した位置までスクロールするハイライト効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。