ウェイポイントを使ってスクロールの進捗バーをアクティブにする方法は？

Question

スクロールの進捗バーを有効にして、そのためにwaypoints.jsを使用します。しかし、それは動作していないと私はスクロールする前に、または（like in my current code）は、スクロールだけでなく、ページの読み込みに空のまま進行状況バーが '満たされている'です。

HTML：

<div id="progress-bar-start" class="center-block progress-wrapper"> 
    <h4>UI/UX Design:</h4> 
    <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> 

はCSS：

#skills { 
    margin-top: 0px; 
    margin-bottom: 50px; 
    .skills-title::first-letter { 
    font-size: 60px; 
    color: pink; 
    } 
    .progress-wrapper { 
    width: 50%; 
    margin-top: 30px; 
    .progress-bar { 
     background-color: pink; 
     width: 0; 
     animation: progress 1.5s ease-in-out forwards; 
     .title { 
     opacity: 0; 
     animation: show 0.35s forwards ease-in-out 0.5s; 
     } 
    } 
    .progress { 
     height: 40px; 
    } 
    } 
    @keyframes show { 
    from { 
     opacity: 0; 
    } 
    to { 
     opacity: 1; 
    } 
    } 
} 

JS：

$('#skills').waypoint(function(direction) { 
    if (direction === 'down') { 
     $('.progress-bar').addClass("show"); 
    } else { 
     $('.progress-bar').removeClass("show"); 
    } 
}, { 
    offset: '50%' 
}); 

Answer 1

ここで注意すべき点がいくつがあります。

• まずは、ウェイポイントのoffsetオプションで起動してみましょう：要素のトップは、ウィンドウの上部に当たったとき、デフォルトでは、ウェイポイントをトリガします。 offsetは、これらのトップポジション間のトリガ距離を指定します。 例では、#skillsセクションがウィンドウの上部に貼り付いていることに注意することが重要です。つまり、offset >= 0でページロード時にただちにトリガーし、1回だけ（ '下方向'で）トリガーします。
• 第2に、プログレスバーの進行状況を表示するには、表示/表示とは対照的に、バーのwidthを設定する必要があります。また、幅を設定するには、max-width属性の代わりにwidthを使用する必要があります。これはCSSアニメーションを実行するために必要です。

次のように、解決策は次のとおりです。

HTML

<div class="progress"> 
    <!-- CHANGE style="max-width: 60%" TO data-score="60%" --> 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-score="60%"></div> 
</div> 

JS

$('#skills').waypoint(function(direction) { 
    if (direction === 'down') { 
     $('.progress-bar').width(function(){ 
      // this here refers to individual .progress-bar items 
      return $(this).data('score'); 
     }); 
    } else { 
     $('.progress-bar').width(0); 
    } 
}, { offset: '10%' }); 

SCSS

#skills { 
    margin-top: 100px; 
    /* …the rest is the same… */ 
} 

Fiddleでも利用できる作業例。

UPDATE（コメントのための答え）：アニメーションを希望する場合には
は、ユーザーがスクロールダウンするたびに発生する、しかし、あなたが変えることができ、その間に、プログレスバーの減少アニメーションを表示しませんコード次のように

$('#skills').waypoint(function(direction) { 
    if (direction === 'down') { 
     $('.progress-bar').width(function(){ 
      // this here refers to individual .progress-bar items 
      return $(this).data('score'); 
     }); 
    } 
}, { offset: '10%' }); 

$('#skills').waypoint(function(direction) { 
    if (direction === 'up') { 
     $('.progress-bar').width(0); 
    } 
}, { offset: '100vh' }); 

コード上では依然として減少アニメーションを実行するが、（フィドルのように）インラインフレームで動作していない場合#skillsがビューポートの外にある場合、それがトリガーしまったとして表示されている習慣。 （この場合は、可視性クラスも使用することができます） 機能をよりよく表示するために、を#skillsに設定しました。これはFiddle versionです。