Javascript 如何使用scrollTop作为百分比而不是像素

我正在为div设置动画，使其在到达页面顶部时收缩。不幸的是，scrollTop是一个像素编号，它不是响应友好的，因为每个设备的像素数量都不同

我的解决方案是使用窗口的百分比，但我仍在学习，我不知道如何做到这一点。到目前为止我就在这里-

---

你可以做一些计算来得到百分比，但你不需要这样做。您应该使用

offsetTop

获取div的顶部，而不是添加固定值，例如

if (document.body.scrollTop > document.getElementById("header").offsetTop || 
    document.documentElement.scrollTop > document.getElementById("header").offsetTop) {

每个头div的代码几乎相同，因此如果将所有div元素保留在一个数组中，则可以删除重复，并循环执行该操作以获得

偏移量

并设置样式，如下所示：

function scrollFunction() {

  for (var i = 0; i < headerdivs.length; i++) {
    if (document.body.scrollTop > headerdivs[i].offsetTop || document.documentElement.scrollTop > headerdivs[i].offsetTop) {
      headerdivs[i].style.width = "80%";
    } else {
      headerdivs[i].style.width = "100%";
    }
  }
}

此示例演示如何在用户开始滚动页面时收缩页眉

向下滚动此帧以查看效果

滚动至顶部以删除效果

Lorem ipsum door dummy text sit amet，concetetur adipiscing elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
我的心在我的心上，我的心在我的心上。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

您可以计算每个部分顶部的距离及其高度。那么，你就得那样看了

let header = document.getElementById("header");
let boundingBox = header.getBoundingClientRect();
let distanceToTop = boundingBox.top;

if (document.body.scrollTop > distanceToTop || document.documentElement.scrollTop > distanceToTop) {
  document.getElementById("header").style.width = "80%";
} else {
  document.getElementById("header").style.width = "100%";
}

您还可以播放剖面的高度，以添加将触发动画的可见性百分比：

let header = document.getElementById("header");
let boundingBox = header.getBoundingClientRect();
let height = boundingBox.height;
let distanceToTop = boundingBox.top;

if (document.body.scrollTop > distanceToTop + height * 0.5|| document.documentElement.scrollTop > distanceToTop + height * 0.5) {
  document.getElementById("header").style.width = "80%";
} else {
  document.getElementById("header").style.width = "100%";
}

---

您也可以使用IntersectionObserver API完成此操作，这里的文档：

谢谢，这看起来不错，但我计划有多个不同大小的重叠元素，因此我仍然认为我需要一个百分比，以便可以独立控制每个div。@Aurochs我不明白您为什么需要百分比？您需要获取元素的物理顶部位置，以查看它是否位于屏幕顶部

scrollTop

告诉您在任何屏幕大小上显示的内容。不管屏幕的滚动百分比是多少。该设备使用精确的像素值

scrollTop

将始终告诉您屏幕上元素的顶部位置，即使窗口大小发生变化或由于其他元素的大小发生变化而移动。这是你需要的确定值。好吧，我还在努力理解它。我将与此合作，谢谢！我还有别的事要做吗？我得到了这个错误-未捕获的TypeError:无法在window.onscroll的scrollFunction（test.html:60）中读取null的属性'offsetTop'

let header = document.getElementById("header");
let boundingBox = header.getBoundingClientRect();
let height = boundingBox.height;
let distanceToTop = boundingBox.top;

if (document.body.scrollTop > distanceToTop + height * 0.5|| document.documentElement.scrollTop > distanceToTop + height * 0.5) {
  document.getElementById("header").style.width = "80%";
} else {
  document.getElementById("header").style.width = "100%";
}