Как активировать индикатор на скролле, используя путевые точки?

Question

Я хочу активировать индикатор выполнения при прокрутке и использовать waypoints.js для этого. Однако это не работает, и индикатор выполнения либо "заполняется" до того, как я прокручиваю его, либо ( как в моем текущем коде) остается "пустым" при прокрутке, а также при загрузке страницы.

HTML:

<div id="progress-bar-start" class="center-block progress-wrapper">
    <h4>UI/UX Design:</h4>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 60%">
            <span class="title">60%</span>
        </div>
    </div>
</div>

CSS:

#skills {
  margin-top: 0px;
  margin-bottom: 50px;
  .skills-title::first-letter {
    font-size: 60px;
    color: pink;
  }
  .progress-wrapper {
    width: 50%;
    margin-top: 30px;
    .progress-bar {
      background-color: pink;
      width: 0;
      animation: progress 1.5s ease-in-out forwards;
      .title {
        opacity: 0;
        animation: show 0.35s forwards ease-in-out 0.5s;
      }
    }
    .progress {
      height: 40px;
    }
  }
  @keyframes show {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

ЯШ:

$('#skills').waypoint(function(direction) {
    if (direction === 'down') {
        $('.progress-bar').addClass("show");
    } else {
        $('.progress-bar').removeClass("show");
    }
}, {
    offset: '50%'
});

Answer 1

Здесь есть пара вещей, на которые стоит обратить внимание.

• Во-первых, давайте начнем с Waypoint offset опция: по умолчанию путевая точка срабатывает, когда вершина элемента достигает вершины окна. offset определяет расстояние срабатывания между этими верхними позициями. В вашем примере важно отметить, что #skills раздел прилипает к верхней части окна, что означает, что с offset >= 0 он запускается сразу при загрузке страницы и только один раз (с направлением "вниз").
• Во-вторых, чтобы показать прогресс выполнения, вы должны установить width панели, в отличие от видимости / отображения. Кроме того, установка ширины должна быть сделана с помощью width вместо max-width атрибут, так как это необходимо для запуска анимации CSS.

Итак, решение заключается в следующем:

HTML

<div class="progress">
    <!-- CHANGE style="max-width: 60%" TO data-score="60%" -->
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-score="60%"></div>
</div>

JS

$('#skills').waypoint(function(direction) {
    if (direction === 'down') {
        $('.progress-bar').width(function(){
            // this here refers to individual .progress-bar items
            return $(this).data('score');
        });
    } else {
        $('.progress-bar').width(0);
    }
}, { offset: '10%' });

SCSS

#skills {
  margin-top: 100px;
  /* …the rest is the same… */
}

Рабочий пример также доступен на Fiddle.

ОБНОВЛЕНИЕ (ответ за комментарий):
В случае, если вы хотите, чтобы анимация происходила каждый раз, когда пользователь прокручивает страницу вниз, но не показывать уменьшающуюся анимацию индикатора выполнения, тем временем вы можете изменить код следующим образом:

$('#skills').waypoint(function(direction) {
    if (direction === 'down') {
        $('.progress-bar').width(function(){
            // this here refers to individual .progress-bar items
            return $(this).data('score');
        });
    }
}, { offset: '10%' });

$('#skills').waypoint(function(direction) {
    if (direction === 'up') {
        $('.progress-bar').width(0);
    }
}, { offset: '100vh' });

Приведенный выше код все еще запускает анимацию уменьшения, но когда он не работает в iframe (как в Fiddle), который не будет виден, так как он запускается, когда #skills находится вне области просмотра. (В этом случае вы также можете использовать классы видимости.) Чтобы лучше продемонстрировать функциональность, я также установил margin-top: 100vh; на #skills в этой версии Fiddle.