在 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;// 判断是否需要隐藏 stickyif (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>
