每个部分的滚动指示器

时间:2018-11-10 09:14:46

标签: javascript css

好,所以我想制作一个滚动指示器,该指示器在每个部分应从0到100开始。每个部分的高度均为100vh。由于现在可以正常使用,当您在所有部分中从上到下滚动时,它将从0变为100。可以说我们有4个部分,即100vh的高度,所以基本上,计数器应该从0到400。

它现在的工作方式是

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

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";

  console.log(winScroll);
}

滚动的变量在经过这四个部分时当然只会从0到100。 有人要挑战吗?

以屏幕截图为例。然后顶部的指示器应在下一部分再次从0开始 enter image description here

我试图说滚动* count_of_sections,但是在完成该部分之前它获得了100%的方式

说出解决方案

document.getElementById("myBar").style.width = `calc(${scrolled * 3}% + 8px)`;

如果有人好奇的话,只有3倍导致您无法滚动最后一部分,而+ 8px则导致进度条的高度

0 个答案:

没有答案