【vue】vue实现滚动到顶部吸附

前言

转载：https://www.cnblogs.com/leiting/p/10337313.html

实现

html <!--如果isFixed为true的话，就添加class is_fixed 设置固定定位--> <div id="boxFixed" :class="{'is_fixed' : isFixed}"> 这个是要滚动到顶部吸附的元素 </div> js mounted(){ window.addEventListener('scroll',this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理 }, // method方法 handleScroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量 let offsetTop = document.querySelector('#boxFixed').offsetTop; // 要滚动到顶部吸附的元素的偏移量 this.isFixed = scrollTop > offsetTop ? true : false; // 如果滚动到顶部了，this.isFixed就为true } css 这个自己根据实际情况来调整 .is_fixed { position: fixed; top: 0; width: 100%; z-index: 99999; padding-bottom: 20px; }