Как я могу заставить мою функцию запускаться несколько раз с разными параметрами? - PullRequest
Новая
       48

Как я могу заставить мою функцию запускаться несколько раз с разными параметрами?

0 голосов
/ 25 мая 2020 

var a = new scrollValues(0, 1000);
var b = new scrollValues(2000, 3000);

function scrollValues(start, end) {

  function Scrollbar() {
    var winScroll = window.pageYOffset - start;
    var height = end - start;
    var scrolled = (winScroll / height) * 100;

    if (winScroll > 0 && winScroll < height) {
      document.getElementById("progressBar").style.height = scrolled + "%";

    } else {

      document.getElementById("progressBar").style.height = "0%";
    }
  }

  window.onscroll = function() {
    Scrollbar();
  };
}
.header {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 100%;
  z-index: 1;
}

.progress-container {
  background-color: black;
  width: 5px;
  height: 100%;
}

.progress-bar {
  background-color: #d17524;
  width: 5px;
  height: 0%;
}

.section {
  position: relative;
  bottom: 0px;
  min-height: 4000px;
}
<div class="header">
  <div class="progress-container">
    <div class="progress-bar" id="progressBar"></div>
  </div>
</div>

<section class="scroll-video section">
</section>

Я использую приведенный выше код для создания анимации, такой как индикатор выполнения видео, но этот заполняется, когда вы прокручиваете определенные части веб-страницу. Я хочу, чтобы он запускался несколько раз в разных точках, но он работает только для последних значений, которые я вызвал (var b = new scrollValues(40712, 43210); в данном случае). Я пробовал несколько других способов вызвать функцию, но она всегда либо не работает, либо использует только последние упомянутые значения. Что могло вызвать это?

...