头部渐隐渐现效果----移动端

1.html部分

<template>
  <div class="header_wrap">

    <router-link tag="div" to="/" class="backindex" v-show="backindex">
      <div class="iconfont icon-back"></div>
    </router-link>

    <div class="header" v-show="!backindex" :style="opacityStyle">
      <router-link tag="div" to="/" class="detail_back">
        <div class="iconfont icon-back"></div>
      </router-link>
    </div>

  </div>
</template>

2.js逻辑代码

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      backindex: true,
      opacityStyle: {
        opacity: 0
      }
    };
  },
  methods: {
    scrollFunction (){
      const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
      if( top > 60 ){
        this.backindex = false
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
      }else{
        this.backindex = true
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.scrollFunction)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollFunction)
  }
}

</script>

3.css样式部分

<style lang='stylus' scoped>
@import "~@/assets/styles/varibles.styl"
.header_wrap
  position: absolute
  top: 0
  .backindex
    position: fixed
    left: 0.1rem
    top: 0.1rem
     0.6rem
    height: 0.6rem
    line-height: 0.6rem
    text-align: center
    background: rgba(0, 0, 0, 0.5)
    border-radius: 50%
    .icon-back
      color: #ffffff
  .header
    position: fixed
    top: 0
    height: $headerHeight
    background: $bgColor
     100%
    line-height: $headerHeight
    .icon-back
      color: #ffffff
      margin-left: 0.1rem
</style>