我想制作一个脚本,在滚动时使div
与id header
更薄,当你回到页面顶部时更厚。但是我遇到了一个问题:当我向下滚动时,header
变得更薄了,但是当我回到页面顶部时,它不会变得更厚,而且如果你重新加载网页在中间的某个地方然后你到顶部,header
只变厚一次。
我做错了什么?
var head = document.getElementById('header');
var height = 100;
var sourceCoord = head.getBoundingClientRect().top + window.pageYOffset;
var id;
document.addEventListener("scroll", function() {
if (window.pageYOffset > sourceCoord) {
id = setInterval(function() {
if (height == 50) clearInterval(id);
else {
height--;
head.style.height = height + "px";
}
}, 10);
head.style.position = 'fixed';
} else if (window.pageYOffset <= sourceCoord) {
id = setInterval(function() {
if (height == 100) clearInterval(id);
else {
height++;
head.style.height = height + "px";
}
}, 10);
head.style.position = "absolute";
}
});
<div id="header"></div>
问题是你在页面加载时计算qazxsw poi,而实际上它在滚动时会改变。将它包含在滚动侦听器中,你应该很好。