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
      }
    }
  }