如何使用 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中文網其他相關文章！
