Vue中侧边栏吸顶

滚动吸顶是指当页面滚动到一定位置时，某个元素固定在页面顶部，不再随页面滚动而移动。

直接上代码：

示例：

<template>
  <div class="container">
    <div class="sticky-header" :class="{ 'is-sticky': isSticky }">
      <!-- 这里是固定在顶部的内容 -->
    </div>
  </div>
</template>

<style>
.container {
  height: 1000px; /* 设置容器高度，使得可以滚动 */
}

.sticky-header {
  position: relative; /* 设置相对定位 */
}

.is-sticky {
  position: fixed; /* 设置固定定位 */
  top: 0; /* 设置固定在顶部 */
}
</style>

<script>
export default {
  data() {
    return {
      isSticky: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      this.isSticky = scrollTop > 100 // 当页面滚动超过100px时启用固定
    }
  }
}
</script>

VUE:

<template>
  <div class="container">
    <div class="sticky-header" :class="{ 'is-sticky': isSticky }">
      <!-- 这里是固定在顶部的内容 -->
    </div>
  </div>
</template>

CSS:

<style>
.container {
  height: 1000px; /* 设置容器高度，使得可以滚动 */
}

.sticky-header {
  position: relative; /* 设置相对定位 */
}

.is-sticky {
  position: fixed; /* 设置固定定位 */
  top: 0; /* 设置固定在顶部 */
}
</style>

JS:

<script>
export default {
  data() {
    return {
      isSticky: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      this.isSticky = scrollTop > 100 // 当页面滚动超过100px时启用固定
    }
  }
}
</script>

在上面的示例中，我们使用了CSS来实现滚动吸顶。我们通过设置相对定位和固定定位来实现元素的位置变化。我们还通过添加一个is-sticky类来切换元素的定位。

在Vue组件中，我们使用isSticky属性来控制元素是否固定。在mounted钩子中，我们添加一个滚动事件监听器，当页面滚动时，调用handleScroll方法来判断是否启用固定。在destroyed钩子中，我们移除滚动事件监听器，避免内存泄漏。