zoukankan      html  css  js  c++  java
  • 移动端头部固定,上划逐渐透明 (vue)

    移动端头部固定,上划逐渐透明

    <template>
      <div>
        <router-link
          tag="div"
          to="/"
          class="header-abs"
          v-show="showAbs">
          <div class="iconfont header-abs-back">&#xe624;</div>
        </router-link>
        <div
          class="header-fixed"
          v-show="!showAbs"
          :style="opacityStyle"
        >
          <router-link to="/">
            <div class="iconfont header-fixed-back">&#xe624;</div>
          </router-link>
          页面头部标题
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'DetailHeader',
      data () {
        return {
          showAbs: true,
          opacityStyle: {
            opacity: 0
          }
        }
      },
      methods: {
        handleScroll () {
          const top = document.documentElement.scrollTop
          if (top > 60) {
            let opacity = top / 140
            opacity = opacity > 1 ? 1 : opacity
            this.opacityStyle = { opacity }
            this.showAbs = false
          } else {
            this.showAbs = true
          }
        }
      },
      mounted () {
        window.addEventListener('scroll', this.handleScroll)
      },
      unmounted () {
        window.removeEventListener('scroll', this.handleScroll)
      }
    }
    </script>
    
    <style lang="stylus" scoped>
      @import '~styles/varibles.styl'
      .header-abs
        position: absolute
        left: .2rem
        top: .2rem
         .8rem
        height: .8rem
        line-height: .8rem
        border-radius: .4rem
        text-align: center
        background: rgba(0, 0, 0, .8)
        .header-abs-back
          color: #fff
          font-size: .4rem
      .header-fixed
        z-index: 2
        position: fixed
        top: 0
        left: 0
        right: 0
        height: $headerHeight
        line-height: $headerHeight
        text-align: center
        color: #fff
        background: $bgColor
        font-size: .32rem
        .header-fixed-back
          position: absolute
          top: 0
          left: 0
           .64rem
          text-align: center
          font-size: .4rem
          color: #fff
    </style>
  • 相关阅读:
    XML与 实体的相互转化
    SerializeHelper
    Linq To Xml
    JsonHelper
    动态添加XtraTabControl的page页和子窗体
    窗体设置操作
    常用快捷键
    Jquery键盘事件
    Http跨域
    [转]ASP.NET母版页中对控件ID的处理
  • 原文地址:https://www.cnblogs.com/zzxuan/p/10194668.html
Copyright © 2011-2022 走看看