Vue 某区域滚动至顶部 实现吸顶效果(固定定位) / 回到顶部

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

<template>
  <div class="container">
    <div class="header">Header</div>
    <div class="sticky-top" :class="{'fixed': isFixed}">Sticky Top</div>
    <div class="content">
      <!-- 滚动内容 -->
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isFixed: false,
      startPosition: 0,
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const currentPosition = window.pageYOffset || document.documentElement.scrollTop;
      if (!this.isFixed && currentPosition > this.startPosition) {
        this.isFixed = true;
        this.startPosition = currentPosition;
      } else if (this.isFixed && currentPosition <= this.startPosition) {
        this.isFixed = false;
        this.startPosition = currentPosition;
      }
    }
  }
};
</script>
 
<style>
.container {
  height: 2000px;
}
.sticky-top {
  height: 50px;
  background-color: #333;
  color: white;
  transition: all 0.3s;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
</style>

在这个例子中，.sticky-top 是需要实现吸顶效果的元素。当用户滚动页面时，handleScroll 方法会被触发，并根据当前滚动位置来设置isFixed的值。当用户向下滚动超过.sticky-top元素时，它会获得fixed类，从而实现吸顶效果。当用户向上滚动回到原位置以上时，fixed类将被移除，恢复正常定位。