Question

我最近遇到this article内嵌进度条动画的情况。我想使用这个确切的代码，但希望当有人向下滚动时看到它时被触发。当前，该代码在加载时触发。

我基本上是想在“工作原理”一节中找到最简单的方法来实现这些人的工作：https://join.com/。

请帮忙吗？

Answer 1

在jQuery中，scrollTop（）给出位置，scrollHeight给出滚动条的高度。在滚动事件中，设置进度条相对于滚动条位置的宽度

public static string UrlEncode(this string input)
{
    return input.Replace(" ", "%20");
}

Answer 2

您可以通过使用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 3

您可以使用Waypoint JS插件。

http://imakewebthings.com/waypoints/

我创建了一个Codepen，您可以在其中查看其工作方式。

Codepen Animation triggered on scroll

您可以根据需要更改偏移量。在此处查看Waypoint文档：Waypoint

$('#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>

内嵌进度条动画，更改触发器以从加载滚动？

3 个答案: