滚动事件的麻烦

Posted 2021-03-29

我想制作一个脚本，在滚动时使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，而实际上它在滚动时会改变。将它包含在滚动侦听器中，你应该很好。