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

Question

当它们开始到达页面顶部时，我正在为 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%";
  }
}

标签： javascriptscrolltop

Answer 1

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

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

每个标题 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%";
    }
  }
}

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

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

  }
}