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

问题描述

我正在为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%";
  }
}

解决方法

您可以执行某种计算来获取百分比，但是您不必这样做。您应该使用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%";
    }
  }
}

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

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

  }
}

,

您可以计算到每个部分顶部的距离以及它们的高度。然后，您必须那样看。

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（此处的文档：https://developer.mozilla.org/fr/docs/Web/API/Intersection_Observer_API

）进行操作