zoukankan      html  css  js  c++  java
  • 头部渐隐渐现效果----移动端

    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>
  • 相关阅读:
    python 继承与组合
    google浏览器安装不上的绝望经历
    python 类,对象
    Javascript学习笔记——闭包
    面试小结:html/css实现元素居中
    @清晰掉 qsort()
    @清晰掉 sprintf sscanf双胞胎
    @清晰掉 GDB调试器中的战斗机
    @大脑练习: 计算两个矩阵的乘积
    js测试用
  • 原文地址:https://www.cnblogs.com/pwindy/p/14989516.html
Copyright © 2011-2022 走看看