寫一個佈局，當頁面滾動一定高時，導航始終固定在頂部，反之恢復原位

王铁柱6發表於2024-12-09
// 使用 JavaScript 控制導航欄的固定定位

window.addEventListener('scroll', function() {
  const navbar = document.getElementById('navbar'); // 將 'navbar' 替換為你導航欄的 ID
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const threshold = 100; // 設定觸發固定定位的滾動高度閾值

  if (scrollTop > threshold) {
    navbar.classList.add('fixed-top');
  } else {
    navbar.classList.remove('fixed-top');
  }
});

/* CSS 樣式 */

#navbar {
  /* 導航欄的初始樣式 */
  transition: all 0.3s ease; /* 新增過渡效果，使變化更平滑 */
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 新增其他必要的樣式，例如 z-index, background-color 等 */
  z-index: 1000; /* 確保導航欄在其他元素上方 */
  background-color: white; /* 設定背景顏色 */
  /* 可以根據需要新增陰影效果 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
}

HTML 示例:

<!DOCTYPE html>
<html>
<head>
  <title>Sticky Navbar Example</title>
  <link rel="stylesheet" href="style.css"> </head>
<body>

  <nav id="navbar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <div style="height: 2000px;">
    <!-- 頁面內容，用於滾動 -->
    <h1>Scroll down to see the effect</h1>
  </div>

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

解釋:

  1. JavaScript 部分:

    • addEventListener('scroll', function(){...}) 監聽頁面滾動事件。
    • scrollTop 獲取頁面垂直滾動的距離。
    • threshold 定義觸發固定導航欄的滾動高度閾值。
    • classList.add('fixed-top') 和 classList.remove('fixed-top') 根據滾動高度新增或移除 fixed-top 類名，從而控制導航欄的樣式。

  2. CSS 部分:

    • #navbar 定義導航欄的初始樣式。
    • .fixed-top 定義固定定位時的樣式。 position: fixed; 使導航欄固定在頂部。top: 0; left: 0; width: 100%; 使其佔據整個螢幕寬度。 z-index 確保導航欄顯示在其他內容之上。

使用方法:

  1. 將 JavaScript 程式碼儲存為 script.js 檔案。
  2. 將 CSS 程式碼儲存為 style.css 檔案。
  3. 在 HTML 檔案中引入這兩個檔案。
  4. 將 navbar 的 ID 替換為你實際導航欄的 ID。
  5. 根據需要調整 threshold 的值來控制觸發固定定位的滾動高度。
  6. 根據你的設計需求修改 CSS 樣式。

這個方案使用了 JavaScript 和 CSS 來實現，相容性好，並且可以根據需要自定義樣式和行為。 transition 屬性的新增也使導航欄的固定和取消固定更加平滑。

相關文章