导航栏随页面滚动html,实现随着滚动条滚动，导航会自动切换的效果

要实现导航栏随页面滚动并自动切换的效果，可以结合CSS和JavaScript来实现。具体步骤如下：

1. 在CSS中设置导航栏的样式，包括宽度、高度、背景色等，以及将导航栏设置为固定定位（position: fixed）。
2. 使用JavaScript获取导航栏的高度和滚动距离，当滚动距离大于导航栏高度时，将导航栏切换为另一个样式（例如添加背景色、改变字体颜色等）。
3. 将JavaScript代码绑定到页面的滚动事件上，实现随着页面滚动导航栏样式的自动切换。

以下是示例代码：

HTML：

<div class="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<div class="content">
  <!-- 页面内容 -->
</div>

CSS：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  z-index: 999;
}

.navbar.scrolled {
  background-color: #333;
  color: #fff;
}

JavaScript：

window.addEventListener('scroll', function() {
  var navbar = document.querySelector('.navbar');
  var scrolled = window.scrollY > navbar.offsetHeight;

  if (scrolled) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

在上面的代码中，我们使用了`querySelector`方法获取了导航栏元素，并且在滚动事件中根据滚动距离来判断是否需要更改导航栏的样式。如果滚动距离大于导航栏高度，则将导航栏的样式切换为`scrolled`类中定义的样式。否则，将导航栏的样式还原为默认样式。