如何在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>