Wie animiere Bootstrap Fortschrittsbalken nur auf Scroll mit Javascript/jquery?

Question

Ich möchte die Bootstrap-Fortschrittsbalken beim Scrollen animieren (auch bei jedem Scrollen sollte die Animation neu gestartet werden). Ich habe nach Lösungen für stackoverflow gesucht, aber wenn ich sie anwende, funktioniert nichts, also bewegt sich der Fortschrittsbalken immer noch nicht beim Blättern, sondern beim Laden der Seite. Ich würde es gerne mit js/jquery und Keyframes und ohne Bibliothek machen. Wenn jemand einen Tipp hat, wäre das toll. Vielen Dank!

https://jsfiddle.net/hdxv4hrp/ 

Code: html:

<div class="spacer"></div> 
<div style="width: 400px; margin: 50px auto"> 
    <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> 

<div style="width: 400px; margin: 50px auto"> 
    <div class="progress"> 
     <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 10%"> 
      <span class="title">20%</span> 
     </div> 
    </div> 
</div> 
<div style="width: 400px; margin: 50px auto"> 
    <div class="progress"> 
     <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 90%"> 
      <span class="title">90%</span> 
     </div> 
    </div> 
</div> 

css:

.progress-bar { 
    width: 0; 
    animation: progress 1.5s ease-in-out forwards; 
    .title { 
     opacity: 0; 
     animation: show 0.35s forwards ease-in-out 0.5s; 
    } 
} 
@keyframes progress { 
    from { 
     width: 0; 
    } 
    to { 
     width: 100%; 
    } 
} 
@keyframes show { 
    from { 
     opacity: 0; 
    } 

js:

$(window).scroll(function() { 
    if ($(window).scrollTop() > 0) { 
     progress-bar.addClass("show"); 
    } else { 
     progress-bar.removeClass("show"); 
    } 
}); 

Answer 1

Siehe unten Ich denke, das ist das, was Sie wollen, ich einige hinzugefügt haben css Eigenschaften der Fortschrittsbalken auf festen Position zu halten, so dass Sie den Fortschritt verfolgen und überprüfen, ob es richtig

$(document).ready(function() { 
 
    $(document).scroll(function(event) { 
 
    var topPos = $(this).scrollTop() + 100; 
 
    var windowHeight = $(this).height(); 
 
    var docHeight = $(document).height(); 
 

 
    if (topPos >= $('#progress-1').position().top) { 
 
     $('#progress-1 >.progress-bar').css({ 
 
      'max-width': '100%' 
 
     }) 
 
     .attr('aria-valuenow', 100) 
 
     .find('span.title').text('100%'); 
 
    } else if (topPos < $('#progress-1').position().top) { 
 
     $('#progress-1 >.progress-bar').css({ 
 
      'max-width': '0%' 
 
     }) 
 
     .attr('aria-valuenow', 0) 
 
     .find('span.title').text('0%'); 
 
    } 
 

 

 
    if (topPos >= $('#progress-2').position().top) { 
 
     $('#progress-2 > .progress-bar').css({ 
 
      'max-width': '100%' 
 
     }) 
 
     .attr('aria-valuenow', 100) 
 
     .find('span.title').text('100%'); 
 
    } else { 
 
     $('#progress-2 > .progress-bar').css({ 
 
      'max-width': '0%' 
 
     }) 
 
     .attr('aria-valuenow', 0) 
 
     .find('span.title').text('0%'); 
 
    } 
 

 

 
    if (topPos >= $('#progress-3').position().top) { 
 
     $('#progress-3 > .progress-bar').css({ 
 
      'max-width': '100%' 
 
     }) 
 
     .attr('aria-valuenow', 100) 
 
     .find('span.title').text('100%'); 
 
    } else { 
 
     $('#progress-3 > .progress-bar').css({ 
 
      'max-width': '0%' 
 
     }) 
 
     .attr('aria-valuenow', 0) 
 
     .find('span.title').text('0%'); 
 
    } 
 
    }); 
 
})

.title { 
 
    color: #000; 
 
} 
 

 
.image { 
 
    background-image: url(http://unsplash.imgix.net/44/lSed5VXIQnOw7PMfB9ht_IMG_1642.jpg?fit=crop&fm=jpg&h=660&q=75&w=1050); 
 
    height: 400px; 
 
} 
 

 
.progress-bar { 
 
    width: 0; 
 
    animation: progress 1.5s ease-in-out forwards; 
 
    .title { 
 
    opacity: 0; 
 
    animation: show 0.35s forwards ease-in-out 0.5s; 
 
    } 
 
} 
 

 
@keyframes progress { 
 
    from { 
 
    width: 0; 
 
    } 
 
    to { 
 
    width: 100%; 
 
    } 
 
} 
 

 
@keyframes show { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 

 
<div class="spacer"></div> 
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
 
<div style="width: 400px; margin: 50px auto"> 
 
    <div class="progress" id="progress-1"> 
 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%"> 
 
     <span class="title">0%</span> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
 

 
<div style="width: 400px; margin: 50px auto"> 
 
    <div class="progress" id="progress-2"> 
 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%"> 
 
     <span class="title">0%</span> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br /><br /><br /><br /><br /><br /> 
 
<div style="width: 400px; margin: 50px auto"> 
 
    <div class="progress" id="progress-3"> 
 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%"> 
 
     <span class="title">0%</span> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
 
/><br /><br /><br /><br /><br />