css吸顶特效（elementui vue3官网）

在Vue 3和Element Plus中实现一个吸顶效果，可以通过监听滚动事件来动态改变元素的position属性。以下是一个简单的示例：

<template>
  <el-container class="main-container">
    <el-header fixed>Header (固定位置)</el-header>
    <el-main class="main-content">
      <!-- 内容区域 -->
      <div class="sticky-box">吸顶盒子</div>
      <!-- 更多内容 -->
    </el-main>
  </el-container>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import { ElContainer, ElHeader, ElMain } from 'element-plus';
 
const stickyBox = ref(null);
const stickyOffset = ref(0);
 
onMounted(() => {
  // 计算吸顶盒子的偏移量
  stickyOffset.value = stickyBox.value.$el.offsetTop;
});
 
window.addEventListener('scroll', () => {
  const isSticky = window.scrollY >= stickyOffset.value;
  const stickyBoxEl = stickyBox.value.$el;
  if (isSticky !== stickyBoxEl.classList.contains('sticky')) {
    // 切换吸顶状态
    stickyBoxEl.classList.toggle('sticky');
  }
});
</script>
 
<style scoped>
.main-container {
  height: 100vh;
}
 
.main-content {
  padding: 20px 0;
}
 
.sticky-box {
  padding: 10px;
  background-color: #fff;
  transition: all 0.3s;
}
 
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
 
/* 其他样式 */
</style>

在这个示例中，.sticky-box是需要实现吸顶效果的元素。当用户滚动页面至该元素所在位置时，.sticky类将被添加，元素的position将变为fixed，并且固定在页面顶部。通过计算.sticky-box元素的offsetTop属性，我们可以得知它在页面中的位置，并据此来判断是否需要添加吸顶样式。