How to animate bootstrap progress bar only on scroll with javascript / jquery?

Question

I want to animate the bootstrap progress bar on scroll (also every time you scroll the animation should restart). Ive looked up solutions on stackoverflow, but when I apply them, nothing works, so the progress bar still 'moves' not on scroll but on page load. I would like to just do it with js/jquery and keyframes and without any library. If anyone has a tip, that would be great. Thanks!

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

See below i think this is what you want i have added some css properties to keep the progress bar on top fixed position so that you can track the progress and verify if it works correctly

 $(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 />