vue3监听滚动事件固定元素位置

飘散的蒲公英

已于 2024-01-25 17:36:10 修改

阅读量1.1k

点赞数 7

文章标签： vue.js 前端 javascript

于 2024-01-25 17:33:07 首次发布

本文链接：https://blog.csdn.net/xt190224/article/details/135849314

版权

<template>
 <div class="scroll-example">
     <div class="fixed-content">
      //固定元素
      //.....
    </div>
</div>

1.滚动事件

onMounted(() => {
  // 监听滚动
  window.addEventListener('scroll', handleScroll, true)
})
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

2.获取元素滚动高度，设置固定样式

const handleScroll = () => {
  // 该写法，滚动获取的高度一直是0
  // const scrollOffset = window.scrollY || document.documentElement.scrollTop 
  const scrollOffset = document.querySelector('.scroll-example').scrollTop
  const el = document.querySelector('.fixed-content')//需要固定的元素
  // 获取所需元素到文档顶部的距离
  const offsetTop = el.offsetTop
  // 然后判断滚动条位置让该元素是否固定定位
  if (scrollOffset >= offsetTop) {
    el.style.position = 'fixed'
  // 设置需要固定元素的样式，比如 top: 0; left: 0;
  } else {
  // 恢复默认样式
    el.style.position = 'static'
  }
}

可以啦，撒花撒花❀ ❀❀