效果

这是一个常见的官网导航条效果，首次进入时导航条为浅灰色，当导航条移动指定位置时切换主题色

实现步骤：

1、监听页面scroll滚动事件
2、实时获取滚动的距离
3、超过阈值开始改变导航条背景色

代码

html部分

<!-- 绑定顶部导航条css样式 -->
    <div class="nav" :style="style"> 
      <div class="container">          
      </div>
    </div>

JavaScript部分

mounted() {
   
   
    window.addEventListener("scroll", this.windowScroll); //监听页面滚动
  },
  methods: {
   
   
    windowScroll() {
   
   
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; // 计算出移动位置
      this.opacity = Math.abs(Math.round(scrollTop)) / 250; // 根据移动位置动态设置背景透明度
      this.style = {
   
    background: `rgba(0, 0, 0,${
     
     this.opacity})` };// 设置过度效果
    },
  },
  destroyed() {
   
   
    window.removeEventListener("scroll", this.windowScroll); //销毁滚动事件
  },

知识点

scroll

scroll 是 window全局事件 ，是指在网页中滚动页面时触发的事件。当用户在浏览器中滚动页面时，会触发该事件，开发者可以通过监听该事件来执行相应的操作。

scroll 事件可以用于实现一些与页面滚动相关的功能，例如：

• 监听滚动事件，实现页面的懒加载，当滚动到某个位置时加载更多内容；
• 实现滚动时的动画效果，例如滚动到某个位置时元素的淡入淡出效果；
• 监听滚动事件，实现导航栏的固定效果，当页面滚动到一定位置时，导航栏固定在页面顶部；
• 监听滚动事件，实现滚动条的自定义样式等。

在 JavaScript 中，可以通过添加事件监听器来监听 scroll 事件，例如：

window.addEventListener('scroll', function() {
   
   
  // 在这里编写滚动事件的处理逻辑
});

当页面滚动时，该事件监听器中的回调函数会被触发，开发者可以在回调函数中编写相应的处理逻辑。