在 Vue 中实现 sticky 鼠标上滑显示、下滑隐藏的效果

本文链接：https://blog.csdn.net/qq_37770233/article/details/129127475

本文介绍了在Vue组件中实现一个sticky效果，当鼠标上滑时显示，下滑时隐藏。关键在于利用数据属性isStickyVisible和scroll事件监听器，以及CSS样式来控制组件的显示与隐藏状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 Vue 中实现 sticky 鼠标上滑显示、下滑隐藏的效果

首先在需要实现该效果的组件中，创建一个数据属性，例如： isStickyVisible: true，并将其初始值设置为 true。
在组件的模板中，使用 v-show 绑定该数据属性，实现初始时的显示效果。

<div v-show="isStickyVisible" class="sticky">
  <!-- Sticky 内容 -->
</div>

接下来，我们需要在组件的 mounted 钩子函数中，为窗口添加 scroll 事件监听器，并编写处理函数。

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    // 获取滚动条滚动的距离
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    // 判断是否需要隐藏 sticky
    if (scrollTop > this.lastScrollTop) {
      this.isStickyVisible = false;
    } else {
      this.isStickyVisible = true;
    }
    this.lastScrollTop = scrollTop;
  }
},
data() {
  return {
    lastScrollTop: 0,
    isStickyVisible: true
  };
}

在 handleScroll 处理函数中，我们需要获取当前的滚动位置，可以使用 window.pageYOffset 或 document.documentElement.scrollTop 或document.body.scrollTop，它们在不同浏览器中的实现方式略有不同，需要兼容处理。
根据当前滚动位置和上次滚动位置的比较，判断是否需要隐藏 sticky，并将 isStickyVisible
数据属性的值设置为相应的布尔值。
最后，我们需要在组件销毁时，移除 scroll 事件监听器，以免出现内存泄漏。

完整代码如下：

<template>
  <div>
    <div class="content">
      <!-- 页面内容 -->
    </div>
    <div v-show="isStickyVisible" class="sticky">
      <!-- Sticky 内容 -->
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
      if (scrollTop > this.lastScrollTop) {
        this.isStickyVisible = false;
      } else {
        this.isStickyVisible = true;
      }
      this.lastScrollTop = scrollTop;
    }
  },
  data() {
    return {
      lastScrollTop: 0,
      isStickyVisible: true
    };
  }
};
</script>

<style>
.sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: transform 0.3s ease-in-out;
}
.sticky.is-hidden {
  transform: translateY(100%);
}
</style>

在这里，我们定义了一个 .sticky.is-hidden 的样式，它将 Sticky 向下偏移一个 Sticky 的高度，实现隐藏效果。

同时，我们将 transition 属性设置为 transform 0.3s ease-in-out，实现了 Sticky 在显示和隐藏时的平滑过渡效果。

在组件的模板中，我们将 v-show 指令替换为 v-bind:class，绑定 is-hidden 类名，当 isStickyVisible 为 false 时，Sticky 将自动添加 .is-hidden 类名，实现隐藏效果。
完整代码如下：

<template>
  <div>
    <div class="content">
      <!-- 页面内容 -->
    </div>
    <div :class="{ sticky: true, 'is-hidden': !isStickyVisible }">
      <!-- Sticky 内容 -->
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
      if (scrollTop > this.lastScrollTop) {
        this.isStickyVisible = false;
      } else {
        this.isStickyVisible = true;
      }
      this.lastScrollTop = scrollTop;
    }
  },
  data() {
    return {
      lastScrollTop: 0,
      isStickyVisible: true
    };
  }
};
</script>

<style>
.sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: transform 0.3s ease-in-out;
}
.sticky.is-hidden {
  transform: translateY(100%);
}
</style>