如何使用 JavaScript 實現網頁頂部固定導覽列的收縮效果？

如何使用 JavaScript 實作網頁頂部固定導覽列的收縮效果？

在現代網頁設計中，固定導覽列已經成為了一個常見的設計元素。當使用者捲動頁面時，固定導覽列可以一直保持在頁面頂部，使得使用者可以輕鬆瀏覽網頁的不同部分。而為了提升使用者體驗，有時我們希望在頁面向下捲動時，固定導覽列能夠收縮起來，以節省頁面空間。本文將介紹如何使用 JavaScript 來實現此效果。

首先，在HTML 檔案中新增一個固定導覽列的容器，可以使用nav 元素來實現：

<nav id="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

接下來，新增CSS 樣式讓導覽列固定在頁面的頂部，並設定初始高度和過渡效果：

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ffffff;
  transition: height 0.3s ease-in-out;
  height: 60px; /* 初始高度 */
  z-index: 9999;
}

#navbar.shrink {
  height: 40px; /* 收缩后的高度 */
}

在JavaScript 中實現導覽列的收縮效果主要是透過監聽頁面捲動事件來控制導覽列的樣式。

window.addEventListener('scroll', function() {
  var navbar = document.getElementById('navbar');
  var scrollPosition = window.pageYOffset;

  if (scrollPosition > 100) { // 根据具体需求调整滚动位置的阀值
    navbar.classList.add('shrink');
  } else {
    navbar.classList.remove('shrink');
  }
});

在上述程式碼中，我們使用 window.addEventListener 監聽 scroll 事件，當頁面捲動時觸發回呼函數。在回呼函數中，我們首先取得導覽列的元素，並使用 window.pageYOffset 來取得滾動的垂直偏移量。根據具體需求，可以調整判斷導覽列收縮的滾動位置閥值。

當頁面滾動的垂直偏移量超過閥值時，我們將 shrink 類別名稱新增到導覽列元素上，觸發 CSS 中定義的縮小樣式。當捲動回到閥值以下時，我們移除 shrink 類別名，導覽列恢復初始樣式。

最後，在頁面中引入所寫的 JavaScript 程式碼：

<script src="script.js"></script>

以上就是使用 JavaScript 實作網頁頂部固定導覽列收縮效果的具體步驟和程式碼範例。透過監聽捲動事件，我們可以根據頁面的捲動位置來動態改變導覽列的樣式，實現縮小效果。這樣使用者在瀏覽網頁時會有更好的體驗，同時也能節省頁面的空間。

以上是如何使用 JavaScript 實現網頁頂部固定導覽列的收縮效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！