1.顶吸
需求：某个元素要在滚动列表的时候吸住顶部
mounted() {
window.addEventListener("scroll", this.suckTopFunc);
},
beforeDestroy() {
window.removeEventListener("scroll", this.suckTopFunc);
},
methods:{
suckTopFunc() {
let offsetTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
//offsetTop是滚动条到顶部的距离
if (offsetTop >= 110) {
//在这里做操作
} else {
//在这里做操作
}
}
}
2.吸底
需求：有个列表，但是底部需要自己加总计数据的div，并且始终处在底部
思路：通过标识元素判断，视口是否显示到了列表的最下方，
如果显示到了，则总计的盒子按照正常文档流显示，
如果没有显示，则总计的盒子position:fixed到页面底部
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
......
</ul>
// 这里可以加个标识用的元素，用来判断页面是否滚动到列表最下方
<div class="tips" ref="tips"></div>
<div :class="isFixed ? 'fixed-style' : ''">
总计：5
</div>
data () {
return {
isFixed: false
}
},
beforeDestroy() {
window.removeEventListener("scroll", this.handlerScroll);
},
mounted(){
this.$nextTick(() => {
window.addEventListener("scroll", this.handlerScroll);
});
},
methods:{
handlerScroll() {
//在这传入标识元素的节点，用$refs获取
this.isFixed = this.isElementNotInViewport(this.$refs.tips) ? true : false;
},
// 在这判断，总计的div是否显示在页面中
isElementNotInViewport (el) {
let rect = el.getBoundingClientRect();
return (
rect.top >= (window.innerHeight || document.documentElement.clientHeight) ||
rect.bottom <= 0
);
};
}