这是一个流行已久的操作,一个页面在向下滚动时,隐藏头部;向上滚动时,出现头部。
向下滚动,这样可以尽可能多地展示内容区;
向上滚动,即时展示头部,方便用户查看菜单信息,打开菜单键;
写法也很简单,在页面挂载完成后,添加监听事件,判断滚动方向,页面销毁之前注销事件即可。
以下贴代码,记录于此。
<script>
export default {
data() {
return {
i: 0,
};
},
mounted() {
window.addEventListener("scroll", this.handleScroll, true);
},
methods: {
handleScroll() {
// 页面滚动距顶部距离
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
let scroll = scrollTop - this.i;
this.i = scrollTop;
// 在顶部时,需要去掉fixed
if (scrollTop === 0) {
document
.getElementById("header")
.classList.remove("animate__fadeInDown");
document.getElementById("header").classList.remove("animate__animated");
document.getElementById("header").classList.remove("show");
return
}
// 鼠标向上滚动
if (scroll < 0) {
document.getElementById("header").classList.add("animate__fadeInDown");
document.getElementById("header").classList.add("animate__animated");
document.getElementById("header").classList.add("show");
} else {
// 鼠标向下滚动
document
.getElementById("header")
.classList.remove("animate__fadeInDown");
document.getElementById("header").classList.remove("animate__animated");
document.getElementById("header").classList.remove("show");
}
},
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll, true);
},
};
</script>