javascript/jqueryでスクロールする場合にのみブートストラップの進行状況をアニメーション化する方法は？

Question

スクロールでブートストラップの進行状況バーをアニメートしたい（アニメーションをスクロールして再起動するたびに）。 Iveはstackoverflowで解決策を探しましたが、私がそれらを適用すると何も動作しませんので、スクロールではなくページロード時にプログレスバーはまだ動きます。私はちょうどjs/jqueryとkeyframesを使って、ライブラリを一切使わずにしたいと思っています。誰かがヒントを持っているなら、それは素晴らしいでしょう。ありがとう！

https://jsfiddle.net/hdxv4hrp/ 

コード： 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

下記を参照してください私は、これはあなたが私はいくつかを追加した欲しいものだと思いますcssあなたは進行状況を追跡し、それが正しく

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