30秒实现Vue吸顶效果

1、滚动前:

30秒实现Vue吸顶效果

2、滚动中:

30秒实现Vue吸顶效果

3、滚动超过后:

30秒实现Vue吸顶效果
直观效果可参pc端微博左侧的信息栏

第一步:html 中:

在你要实现吸顶效果的div上,加上如下这一行代码:

30秒实现Vue吸顶效果
 :class="{'is_fixed' : isFixed}"

触发吸顶效果的位置,如下:

30秒实现Vue吸顶效果
<div id="boxFixed"></div>

第二步:data 定义中:

30秒实现Vue吸顶效果
data() {
    return {
        isFixed: false,
        offsetTop: 0,
        }
    }

第三步:在 mounted 与 destroyed 中

mounted() {
    window.addEventListener('scroll', this.initHeight);
    this.$nextTick(() => {
    //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
    this.offsetTop = document.querySelector('#boxFixed').offsetTop;
    })
},
//回调中移除监听
destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
},

第四步:在 methods 方法定义中:

/********* start-目录吸顶********/
initHeight() {
// 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//如果被卷曲的高度大于吸顶元素到顶端位置 的距离
          this.isFixed = scrollTop > this.offsetTop ? true : false;
},
/********* end-目录吸顶********/

最后一步:在css中:

.is_fixed{
     width: 100%;
     position: fixed;
     top: 0;
     z-index: 999;
}
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » 30秒实现Vue吸顶效果

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活