如何在Vue项目中实现吸顶元素

我的思路就是判断合适的时候将这个元素的position设为fixed,那么这个合适的时机如何判断呢?我们可以计算页面滚动的距离。

监听页面滚动状态

mounted钩子中加入以下代码:

mounted() {
  // handleScroll为页面滚动的监听回调
  window.addEventListener('scroll', this.handleScroll);
 },

离开页面时要移除监听,在destroyed钩子中移除监听:

destroyed(){
  window.removeEventListener('scroll', this.handleScroll);
},

计算吸顶元素到页面顶部的距离

// 监听dom渲染完成
this.$nextTick(function(){
  // 这里fixedHeaderRoot是吸顶元素的ID
  let header = document.getElementById("fixedHeaderRoot");
  // 这里要得到top的距离和元素自身的高度
  this.offsetTop = header.offsetTop;
  this.offsetHeight = header.offsetHeight;
  console.log("offsetTop:" + this.offsetTop + "," + this.offsetHeight);
});

判断页面滚动距离

handleScroll(){
  // 得到页面滚动的距离
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  // 判断页面滚动的距离是否大于吸顶元素的位置
  this.headerFixed = scrollTop > (this.offsetTop - this.offsetHeight);
},

得到一个boolean值的headerFixed,然后就可以动态设置样式了。

.isFixed{
  position: fixed;
  top: px2rem(110);
  left: px2rem(20);
  right: px2rem(20);
}

在DOM中:

<div id="fixedHeaderRoot">
  <div id="knowPointHeader" class="knowPointHeader" :class="headerFixed?'isFixed':''">
    <div><span>知识模块</span></div>
    <div><span>知识点</span></div>
    <div><span>能力要求</span></div>
  </div>
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值