Vue吸顶效果实现

Vue实现吸顶效果。

总体思路

因为在CSS中我们可以设置一个元素的position: fixed;，这样它就可以固定在那里，这样不管页面怎么滚动，它的位置都不受影响，所以我们的思路就是在合适的时机把要吸顶的头部元素的position属性设置为fixed就可以了。但是这个合适的时机是什么时候呢，这就需要我们计算了，我们需要监听页面的滚动状态，当页面滚动到要吸顶元素所处的位置的时候就是我们设置它固定的时候。

吸顶效果具体实现

在需要实现吸顶效果的div上，增加一个class，例如:class="{'is_fixed': isFixed}"：

<div :class="{'is_fixed': isFixed}">
  <div class="title">标题</div>
  <div class="content">
    <div>内容</div>
  </div>
</div>

在需要触发吸顶效果的位置增加（当滚动条下滑超过这个位置，将出现吸顶效果）：

<div id="boxFixed"></div>

增加滚动条监听，计算#boxFixed到顶端的距离：

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

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

// 销毁时移除监听
destroyed() {
  window.removeEventListener('scroll', this.handleScroll)
},

吸顶效果实现CSS：

.is_fixed{
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

页面上下跳动问题解决

当scrollTop大于吸顶元素top的距离，吸顶元素会被设置为固定属性，一个元素一旦被设置为position: fixed;，那么它就会相对于浏览器窗口进行定位，然后下面的内容就会往上顶。一部分内容就看不到了。

一个简单的办法是再加一个和吸顶元素一模一样的元素：

<div v-show="isFixed">
  <div class="title">标题</div>
  <div class="content">
    <div>内容</div>
  </div>
</div>

这个元素默认是隐藏的，只有当页面滚动的距离达到了它的位置的时候我们才让它显示，由于它是固定状态，所以它的隐藏显示并不会对页面产生影响，这样下面的内容就不会往上顶了。

参考

• 30秒实现Vue吸顶效果
• Vue开发——实现吸顶效果