酱酱，好久不见鸭！
前言：吸顶效果图：
1、滚动前：
image.png
2、滚动中：
image.png
3、滚动超过后：
image.png
直观效果可参pc端微博左侧的信息栏
第一步：html 中：
在你要实现吸顶效果的div上，加上如下这一行代码：
image.png
下方代码自取↓
:class="{'is_fixed' : isFixed}"
触发吸顶效果的位置，如下：
image.png
下方代码自取↓
<div id="boxFixed"></div>
第二步：data 定义中：
image.png
下方代码自取↓
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;
}
大功告成，感谢博文：
https://www.jianshu.com/p/5fc421a2f12a
