有类似的需要可以自取,直接上代码:
document.addEventListener('DOMContentLoaded', function () {
const header = document.getElementById('header');
let lastScrollTop = 0;
window.addEventListener('scroll', function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop && scrollTop > header.offsetHeight) {
// 向下滚动,隐藏header
header.style.transform = 'translateY(-100%)';
header.style.transition = 'transform 0.3s ease-in-out';
} else if (scrollTop <= 0) {
// 回到顶部,显示header
header.style.transform = 'translateY(0)';
}
lastScrollTop = scrollTop;
});
});