如何使用 JavaScript 實作導覽選單捲動到指定位置的高亮效果？

如何使用 JavaScript 實作導覽功能表捲動到指定位置的高亮效果？

導覽選單是網頁設計中常見的元件之一，為了提升使用者體驗，我們可以透過 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中文網其他相關文章！