vue项目中的渐隐渐现效果

一、背景需求

在页面中，我们希望实现以下功能：
进入页面时，顶部左侧显示返回按钮
当页面向下滚动一定距离时，在可视区域顶部固定“Header”一栏
效果如下：

二、实现思路

1、静态布局

在页面加载完成后、开始滚动前：
将返回按钮所在的div 设置绝对定位，用标志位showAbs设置v-show

// template
<router-link
    tag="div"
    to="/"
    class="header-abs"
    v-show="showAbs">
    <div class="iconfont header-abs-back">&#xe624;</div>
</router-link>

将"Header"栏所在的div 设置固定定位，用标志位showFixed设置v-show

// template
<div
    class="header-fixed"
    v-show="showFixed"
    :style="opacityStyle">
    景点详情
    <router-link to="/">
      <div class="iconfont header-fixed-back">&#xe624;</div>
    </router-link>
</div>

2、监听滚动事件

在当前组件中，添加mounted的生命周期钩子函数
当页面开始滚动，触发handleScroll函数

mounted () {
    window.addEventListener('scroll', this.handleScroll)
}

在离开当前页面后，解除对这个全局事件的绑定

destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
}

3、设置透明度的变化

在template模板中，我们给顶部栏绑定了 opacityStyle 对应的样式
当页面滚动距离在指定区间内，就让透明度随着滚动距离而变化
当顶部栏完全显示（opacity=1）后，不再变化

data () {
    return {
      showAbs: true,
      opacityStyle: {
        // 设置初始状态是透明的
        opacity: 0
      }
    }
  },
methods: {
    handleScroll () {
      const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
      if (top > 60) {
        let opacity = top / 140
        if (opacity >= 1) {
          opacity = 1
        }
        this.opacityStyle = { opacity }
        this.showAbs = false
      } else {
        this.showAbs = true
      }
    }
  }