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

Question

当 div 开始到达页面顶部时，我正在设置 div 动画以缩小它们。不幸的是，scrollTop 是一个像素数，它对响应不友好，因为每个设备的像素数量都不同。

我的解决方案是使用窗口的百分比，但我仍在学习，我不确定该怎么做。这就是我目前所处的位置-

https://codepen.io/muskaurochs/pen/NWNMOYG

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
    document.getElementById("header").style.width = "80%";
  } else {
    document.getElementById("header").style.width = "100%";
  }
    if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("header2").style.width = "80%";
  } else {
    document.getElementById("header2").style.width = "100%";
  }
    if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
    document.getElementById("header3").style.width = "80%";
  } else {
    document.getElementById("header3").style.width = "100%";
  }
}

Answer 1

您可以进行某种计算以获得百分比，但您不需要这样做。您应该使用 offsetTop 获取 div 的顶部，而不是添加固定值，例如

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

每个 header div 的代码几乎相同，因此如果将所有 div 元素保留在一个数组中，则可以删除重复项，并循环遍历该数组以获取 offsetTop 并设置风格，像这样:

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%";
    }
  }
}

我在这里使用了您的代码笔中的代码来向您展示如何使其工作。

window.onscroll = function() {
  scrollFunction()
};

headerdivs = [
  document.getElementById("header"),
  document.getElementById("header2"),
  document.getElementById("header3"),
]

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%";
    }
  }
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#header {
  background-color: #f1f1f1;
  color: black;
  text-align: center;
  font-weight: bold;
  width: 100%;
  transition: 1s;
  display: block;
}

#header2 {
  background-color: #f1f1f1;
  color: black;
  text-align: center;
  font-weight: bold;
  width: 100%;
  transition: 1s;
  display: block;
}

#header3 {
  background-color: #f1f1f1;
  color: black;
  text-align: center;
  font-weight: bold;
  width: 100%;
  transition: 1s;
  display: block;
}

<div id="header"><img src="https://image.freepik.com/free-photo/wide-asphalt-road-with-buildings-horizon_1127-2192.jpg" width=100%></div>
<div id="header2"><img src="https://image.freepik.com/free-photo/wide-asphalt-road-with-buildings-horizon_1127-2192.jpg" width=100%></div>
<div id="header3"><img src="https://image.freepik.com/free-photo/wide-asphalt-road-with-buildings-horizon_1127-2192.jpg" width=100%></div>

<div style="margin-top:200px;padding:15px 15px 2500px;font-size:30px">
  <p><b>This example demonstrates how to shrink a header when the user starts to scroll the page.</b></p>
  <p>Scroll down this frame to see the effect!</p>
  <p>Scroll to the top to remove the effect.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

编辑:您询问了如何更改 div 变小时距顶部的距离。您可以通过调整 div 顶部的值来做到这一点。例如当 div 的顶部位于屏幕的一半时开始:

// (position of the top of the div) - (half the screen height)
headerDiv.offsetTop - (window.innerHeight / 2);

function scrollFunction() {

  for (var i = 0; i < headerdivs.length; i++) {

    // adjust start point for changing the size, e.g.
    // (position of the top of the div) - (half the screen height)
    startChangingAt = (headerdivs[i].offsetTop) - (window.innerHeight / 2);
    if (startChangingAt < 0) startChangingAt = 0;

    if (document.body.scrollTop > startChangingAt || 
                  document.documentElement.scrollTop > startChangingAt ) 
      headerdivs[i].style.width = "80%";
    else 
      headerdivs[i].style.width = "100%";

  }
}