【Vue3】电商网站吸顶功能

在Vue 3中实现吸顶效果，可以通过监听滚动事件并根据页面的滚动位置动态改变元素的CSS样式来实现。以下是一个简单的示例：

<template>
  <div>
    <div class="header" :class="{ sticky: isSticky }">Header</div>
    <div class="content">
      <!-- 其他内容 -->
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isSticky: false,
      stickyOffset: 0,
    };
  },
  mounted() {
    this.stickyOffset = this.$el.querySelector('.header').offsetTop;
    window.addEventListener('scroll', this.handleScroll);
  },
  unmounted() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.isSticky = window.scrollY >= this.stickyOffset;
    },
  },
};
</script>
 
<style>
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  z-index: 1000;
}
</style>

在这个示例中，.header 是需要吸顶的元素。当页面向下滚动超过 .header 元素的 offsetTop 时，.sticky 类被添加到 .header 元素上，使其变为固定位置。当用户停止滚动时，吸顶效果被移除。注意在组件销毁时移除监听器以避免内存泄漏。