Функция вызова путевой точки, как только секция достигнута - PullRequest
Новая
       51

Функция вызова путевой точки, как только секция достигнута

0 голосов
/ 31 декабря 2018

Таким образом, в настоящее время я пытаюсь создать динамический SVG, который активируется только после того, как пользователь прокрутил этот конкретный раздел.

Я устанавливаю путевую точку для активации javascript, как только перехожу к этому разделу, однако это не так.кажется, работает.Я не уверен, что я делаю здесь не так.

Вот мой код 

let line = document.getElementById("line");
let length = line.getTotalLength();

// line Scroll
$('.howDoesItWork').waypoint(function() {
  line.style.strokeDasharray = length;
  window.addEventListener("scroll", scrollLine);

  function scrollLine() {
    var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

    var draw = length * scrollpercent;

    // Reverse the drawing (when scrolling upwards)
    line.style.strokeDashoffset = length - draw;
  });
.verticalLine {
    position: absolute;
    display: block;
    height: 930px;
    z-index: -1;
    left: 110px;
    top: 221px;
  }

  .top-line {
    border-left: 4px solid rgba(0, 204, 90, 0.3);
    position: absolute;
    height: 930px;
    z-index: 1;
  }

  svg line { stroke: green; }
<section class="howDoesItWork">
  <section class="container grid">
    <section class="verticalLine">
      <section class="top-line"></section>
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="0" x2="0" y2="100" stroke-width="1.2" id="line" />
      </svg>
    </section>
  </section>
 </section>
...