写一个布局，当页面滚动一定高时，导航始终固定在顶部，反之恢复原位

// 使用 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>

解释:

JavaScript 部分:
- addEventListener('scroll', function(){...}) 监听页面滚动事件。
- scrollTop 获取页面垂直滚动的距离。
- threshold 定义触发固定导航栏的滚动高度阈值。
- classList.add('fixed-top') 和 classList.remove('fixed-top') 根据滚动高度添加或移除 fixed-top 类名，从而控制导航栏的样式。
CSS 部分:
- #navbar 定义导航栏的初始样式。
- .fixed-top 定义固定定位时的样式。 position: fixed; 使导航栏固定在顶部。top: 0; left: 0; width: 100%; 使其占据整个屏幕宽度。 z-index 确保导航栏显示在其他内容之上。