滚动吸附实现(吸顶_ts/js)

用于页面滚动实现某块内容吸顶,希望会对你们有帮助

一,VUE2+JS

1.写样式

<style>
    .fixd{
        position: fixed;
        top: 0;//根据自己情况设置距离顶部距离
        z-index: 1000;
        width: auto
    }
</style>

2.给需要实现吸顶的盒子添加ref=‘scrollBox’

<div ref='scrollBox'></div>

3.实现

methods:{
	handleScroll() {
      const scrollBox = this.$refs.scrollBox;
      const scrollTop = window.scrollY;
      const offsetTop = scrollBox.offsetTop;

      if (scrollTop >= offsetTop) {
        scrollBox.classList.add('fixed');
      } else {
        scrollBox.classList.remove('fixed');
      }
    },
}

//添加滚动监听器
mounted(){
    window.addEventListener('scroll', this.handleScroll);
}

//避免内存泄漏
beforeDestroy() {
    window.addEventListener('scroll', this.handleScroll);
},

二,VUE3+TS

样式设置及ref添加同上

方法与实现

setup () {
    const handleScroll = () => {
    const scrollBoxEl = scrollBox.value;
    const scrollTop = window.scrollY;
    const offsetTop = scrollBoxEl.offsetTop;

    if (scrollTop >= offsetTop) {
        scrollBoxEl.classList.add('fixed');
    } else {
        scrollBoxEl.classList.remove('fixed');
    }
    };
}

//挂载
onMounted(() => {
	window.addEventListener('scroll', handleScroll);
});
//避免内存泄漏
onBeforeUnmount(() => {
	window.removeEventListener('scroll', handleScroll);
});