vue中实现顶部菜单样式跟随页面滚动而变化

在做项目的时候，我们会经常碰到这样的需求，页面最顶部的菜单栏目（navBar组件）要跟随页面的滚动而样式发生变化。一图胜千言，我们首先来看一下下面的两张图片。

滚动前的状态

滚动中的状态

滚动完成的状态

通过上面的三张图片，我们可以观察到圈起来的部分（navBar组件）的样式会随着页面的滚动而发生变化，具体来说就是透明度的变化，opacity值从0到1发生变化。

其实说到这里，我们相信大家都可以完成这个需求，无非就是监听页面滚动 + 动态计算opacity值。此处，我就将我的实现代码贴出来一下，还请大家批评指正。下面的代码基于vue，我们假设你对vue有比较好的掌握。
$\color{red}{注：此处我们省略了navBar这个组件的具体实现，其实这个组件虽然简单，也很有技巧性，等有时间了我为大家补上}$
页面主入口：Home.vue（父组件）
1、模版代码

<template>
  <div class="home">
    <nav-bar :opacity="opacity"></nav-bar>
    <img class="banner-img" src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592366580&t=4bec0417a76ccfb02cd1efbe75252a50" alt="">
    <img class="banner-img" src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592366580&t=4bec0417a76ccfb02cd1efbe75252a50" alt="">
    <img class="banner-img" src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592366580&t=4bec0417a76ccfb02cd1efbe75252a50" alt="">
    <img class="banner-img" src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592366580&t=4bec0417a76ccfb02cd1efbe75252a50" alt="">
    <img class="banner-img" src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592366580&t=4bec0417a76ccfb02cd1efbe75252a50" alt="">
  </div>
</template>

首先，来解释一下这个模版，其实最主要就是引用了NavBar这个组件，至于之后引入的图片，完全是拉高页面高度，因为高度不足，不能触发页面的滚动事件。还有一点，就是给NavBar这个组件传递了一个opacity参数，用于改变NavBar组件样式。

**2、js代码**
<script>
import NavBar from './NavBar.vue'
export default {
  name: 'Home',
  data () {
    return {
      scrollTopValue: 0,
      opacity: 0,
      ANCHOR_SCROLL_TOP: 160
    }
  },
  components: {
    NavBar
  },
  mounted(){
    this.onScrollTop()
  },
  methods: {
    onScrollTop(){
      window.addEventListener('scroll', () => {
        //获取当前页面滚动的距离
        this.scrollTopValue = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

        // 计算 navBar 背景颜色（navBar 背景透明度）
        this.opacity = this.scrollTopValue / this.ANCHOR_SCROLL_TOP

        // 指定navBar的插槽样式
        if(this.opacity >= 1){
           //处理滑动结束之后的样式操作，一般为高亮操作
        } else {
          // 处理滑动尚未结束后的操作
        }
        // 根据透明比例设置 navBar 的背景颜色
        this.navBarStyle.background = `rgba(255,255,255,${this.opacity})`
      }, false)
    }
  }
}
</script>

在这段代码中，我们通过给window添加DOM2级事件（scroll）用于监听页面的滚动，并在里边实现了我们所有的逻辑，包括opacity值的计算和页面状态钩子函数的设计。请您参照代码的相关注释进行理解，注释是比较详细的。
3、样式代码

<style lang="scss" scoped>
// @import '@css/style.scss';
.test{
  font-size: px2rem(16);
  text-align: center;
}
.banner-img{
  width: 100%;
}
</style>

NavBar.vue（子组件）
1、模版代码

<template>
  <div class="header" :style="{background:'rgba(255,255,255, '+newOpacity+')'}">滚动变色</div>
</template>

这段代码比较好理解，就是动态改变样式，这也是我们最终在页面看到的效果的机理所在。
2、js代码

<script>
  export default{
    name: 'MHeader',
    props: {
      opacity: {
        type: Number,
        default(){
          return {}
        }
      },
/*
      navBarStyle: {
        type: Object,
        default(){
          return {}
        }
      }
*/
    },
    mounted(){
    },
    computed:{
      newOpacity(){
        return this.opacity
      }
    }
  }
</script>

这段代码中，有一个点需要大家注意，那就是父组件数据变化，子组件接受到的数据也跟着变化。像这样的一个功能，就我个人而言，经常碰到，都能解决，但是下次用起来的时候又忘记了，所以在此处记录一下。其原理就是使用computed时时计算要更改的参数值，在模版中使用时，我们要使用computed新定义的值，比如我们的opactity和newOpacity。但是这种方法只能接受基本数据类型，不能接受Object类型，查阅网上资料，有网友说要使用watch监听opacity的变化，但是我试了一下，没有成功。此处就留下这个疑问吧，等我找到能解决的放了我会分享给大家的。
3、样式代码

<style scoped>
  .header{
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    height: 60px;
    text-align: center;
    background: #FFFFFF;
  }
</style>

样式代码没有什么好说的，为了照顾没有时间看文章的同学，我把干净的代码罗列在下面👇
HomeNav

<template>
  <div class="home">
    <nav-bar :opacity="opacity"></nav-bar>
    <img class="banner-img" src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592366580&t=4bec0417a76ccfb02cd1efbe75252a50" alt="">
    <img class="banner-img" src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592366580&t=4bec0417a76ccfb02cd1efbe75252a50" alt="">
    <img class="banner-img" src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592366580&t=4bec0417a76ccfb02cd1efbe75252a50" alt="">
    <img class="banner-img" src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592366580&t=4bec0417a76ccfb02cd1efbe75252a50" alt="">
    <img class="banner-img" src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592366580&t=4bec0417a76ccfb02cd1efbe75252a50" alt="">
  </div>
</template>

<script>
import NavBar from './NavBar.vue'
export default {
  name: 'Home',
  data () {
    return {
      scrollTopValue: 0,
      opacity: 0,
      ANCHOR_SCROLL_TOP: 160,
      navBarStyle: {}
    }
  },
  components: {
    NavBar
  },
  mounted(){
    this.onScrollTop()
  },
  methods: {
    onScrollTop(){
      window.addEventListener('scroll', () => {
        //获取当前页面滚动的距离
        this.scrollTopValue = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

        // 计算 navBar 背景颜色（navBar 背景透明度）
        this.opacity = this.scrollTopValue / this.ANCHOR_SCROLL_TOP

        // 指定navBar的插槽样式
        if(this.opacity >= 1){
           //处理滑动结束之后的样式操作，一般为高亮操作
        } else {
          // 处理滑动尚未结束后的操作
        }
        // 根据透明比例设置 navBar 的背景颜色
        this.navBarStyle.background = `rgba(255,255,255,${this.opacity})`
      }, false)
    }
  }
}
</script>
<style lang="scss" scoped>
// @import '@css/style.scss';
.test{
  font-size: px2rem(16);
  text-align: center;
}
.banner-img{
  width: 100%;
}
</style>

NavBar.vue

<template>
  <div class="header" :style="{background:'rgba(255,255,255, '+newOpacity+')'}">滚动变色</div>
</template>

<script>
  export default{
    name: 'MHeader',
    props: {
      opacity: {
        type: Number,
        default(){
          return {}
        }
      }
    },
    computed:{
      newOpacity(){
        return this.opacity
      }
    }
  }
</script>
<style scoped>
  .header{
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    height: 60px;
    text-align: center;
    background: #FFFFFF;
  }
</style>

至此，文章结束了，感谢您的阅读。