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

Question

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

Я в основном пытаюсь найти самый простой способ добиться того, что эти люди делали в разделе «как это работает»: https://join.com/.

Любая помощь, пожалуйста?

Answer 1

Этого можно добиться с помощью события scroll , которое вызовет scrollTrigger () , и там вы получите Scroll Top , а затем рассчитайте высоту и прогрессирующие значения окончательноустановить стиль CSS и текст при прокрутке, я думаю, что это понятно:)

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

function scrollTrigger() {
	var scrollTop = document.documentElement.scrollTop;
	var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
	var progess = (scrollTop / height) * 100;
	document.getElementById( 'progressbar' ).style.width = progess + "%";
	document.getElementById( 'progressbar' ).innerHTML = "Upload is " + Math.round( progess ) + "% complete"
}

body { background: black; padding: 100px; margin: 0;height: 900px; }

.progress-bar{
	width: 100vw;
	height: 40px;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #fff
}

.progress-bar > div { 
  color: white; 
  background: red;
  overflow: hidden;
  white-space: nowrap; 
  padding: 10px 0px;
  border-radius: 10px;
  width: 0%;
  text-align: center;
}

<div class="progress-bar">
    <div id="progressbar">0%</div>
  </div>

Answer 2

Вы можете использовать Плагин Waypoint JS.

http://imakewebthings.com/waypoints/

Я создал Codepen, где вы можете увидеть, как он работает.

Анимация Codepen запускается при прокрутке

Вы можете изменить смещение по своему усмотрению.Ознакомьтесь с документацией о путевых точках здесь: Путевая точка

$('#scroll-to').waypoint(function() {
  $(".animated-bar").css({ 
      WebkitAnimationPlayState:"running",
      animationPlayState:"running"
      });
},{offset: 150} );

/* Animate to natural width */

body { background: black; padding: 100px; margin: 0; }

.progress-bar {
  border: 2px solid red;
  border-radius: 14px;

}
.animated-bar { 
  color: white; 
  background: red;
  overflow: hidden;
  white-space: nowrap; 
  padding: 10px 20px;
  border-radius: 10px;
  
  animation: progress-bar 2s;
  animation-play-state: paused;
}

@keyframes progress-bar {
   0% { width: 0; }
}

h1{
  color:white;
}

.scroll-box{
  height: 400px;
}

<div class="scroll-box">
  <h1>Scroll Down</h1>
</div>
<div class="progress-bar" id="scroll-to">
  <div class="animated-bar" style="width: 75%">Upload is 75% complete</div>
</div>
<div class="scroll-box"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/waypoints/1.1.6/waypoints.min.js'></script>

Answer 3

В jQuery scrollTop () задает позицию, а scrollHeight - высоту полосы прокрутки.При событии прокрутки установите ширину прогес-бара относительно положения полосы прокрутки

jQuery('div').on('scroll', function(event){
var top = jQuery('#scroll_container').scrollTop();
var height = jQuery('#scroll_container').scrollHeight;
var width = top/height * 100;
jQuery('#progess-bar').css('width', width+"%");
});