ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。