码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 自动吸顶

时间:2018-09-14 19:48:38      阅读:355      评论:0      收藏:0      [点我收藏+]

标签:page   eve   back   false   事件   document   style   scroll   ati   

 html 元素:

<div class=‘container‘ ref=‘topTab‘>
    <div class="absolute" :class=‘{fixed:isFixed}‘>
        <!-- tab-->
    </div>
    <div>
        <!-- content -->
    </div>
</div>
<style>
    .container{
        padding-top: 40px; position: relative; 
    }
    .absolute{
        position: absolute; width:100%; top:0; left:0;
    }
    .absolute.fixed{
        position: fixed;
    }
</style>

 

绑定事件:

  methods:{
    onScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = this.$refs.topTab.offsetTop
      // console.log(scrollTop , offsetTop)
      if (scrollTop > offsetTop) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    },
  },
  created () {
    window.addEventListener(‘scroll‘, this.onScroll)
  },
  destroyed () {
    window.removeEventListener(‘scroll‘, this.onScroll)
  },

 

Vue 自动吸顶

标签:page   eve   back   false   事件   document   style   scroll   ati   

原文地址:https://www.cnblogs.com/_error/p/9648185.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!