首页 > 其他 > 详细

Vue 自动吸顶

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

 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 自动吸顶

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!