实现导航栏固定，滚动条下滑一定距离后消失，上划继续出现
实现导航栏固定，滚动条下滑一定距离后消失，上划继续出现
const showHeader = ref(true);
// 获取滚动条的高度
const getScrollTop = () => {
let scrollTop =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
return scrollTop;
};
const initScroll = () => {
let initScrollTop = getScrollTop();
let scrollType = 0; //上滚还是下滚
window.addEventListener("scroll", () => {
let currentScrollTop = getScrollTop();
console.log(currentScrollTop);
if (currentScrollTop > initScrollTop) {
// 往下滚
scrollType = 1;
} else {
scrollType = 0;
}
initScrollTop = currentScrollTop;
if (scrollType === 1 && currentScrollTop > 120) {
showHeader.value = false;
}else{
showHeader.value = true;
}
});
};
onMounted(() => {
initScroll();
});