html+css+js实现导航栏色块跟随滑动

要实现导航栏色块随着页面滚动而改变位置，你可以使用JavaScript监听scroll事件，并根据页面的滚动位置改变色块的位置。以下是一个简单的实现示例：

HTML:

<nav id="navbar">
  <div id="nav-color"></div>
  <!-- 导航栏内容 -->
</nav>

CSS:

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  /* 其他样式 */
}
 
#nav-color {
  position: absolute;
  height: 10px; /* 根据需要设置色块的高度 */
  width: 100%;
  background-color: #000; /* 默认颜色 */
  top: 0;
  transition: top 0.3s; /* 平滑过渡效果 */
}
 
/* 其他导航栏样式 */

JavaScript:

window.addEventListener('scroll', function() {
  var colorBlock = document.getElementById('nav-color');
  var scrollPosition = window.scrollY; // 获取当前滚动位置
 
  // 根据滚动位置设置色块的top值
  if (scrollPosition <= 100) { // 假设当滚动距离小于100px时颜色块保持在顶部
    colorBlock.style.top = '0px';
  } else {
    colorBlock.style.top = Math.floor(scrollPosition / 100) + 'px'; // 每100px移动一次
  }
});

这段代码会在用户滚动窗口时监听scroll事件，并且根据页面滚动的距离来调整#nav-color元素的top属性，从而实现颜色块的位置跟随滚动的效果。你可以根据实际需求调整颜色块的高度、滚动时的颜色变化规则等。