使用する方法ウェイポイント

Question

私は中間地点に新たなんだし、それが

仕事を得ることはありませんこれは私のHTML

<section class="progress center" id="progress"> 
<h3>Skills</h3> 
<div class="bars"> 
    <div class="progressbar"> 
     <h4>Concepting & Research</h4> 
     <progress value="75" max="100" class="bar"></progress> 
    </div> 
    <div class="progressbar"> 
     <h4>UX design</h4> 
     <progress value="85" max="100" class="bar"></progress> 
    </div> 
    <div class="progressbar"> 
     <h4>Sketch</h4> 
     <progress value="90" max="100" class="bar"></progress> 
    </div> 
    <div class="progressbar"> 
     <h4>Framer</h4> 
     <progress value="60" max="100" class="bar"></progress> 
    </div> 
    <div class="progressbar"> 
     <h4>HTML5 & CSS</h4> 
     <progress value="65" max="100" class="bar"></progress> 
    </div> 
</div> 

これは私がするときトリガーしたい私のjQueryの機能です進捗バーがビューポート

$(function() { 
    $(".bar").each(function() { 
    var fill = $(this).val(); 
    $(this).val(0).animate({value: fill}, {duration: 750}); 
    }); 
}); 

に来る私はこれを試してみましたが、それは

0123を動作しませんでした

var waypoint = new Waypoint({ 
    element: document.getElementById('progress'), 
    handler: $(function() { 
    $(".bar").each(function() { 
     var fill = $(this).val(); 
     $(this).val(0).animate({value: fill}, {duration: 750}); 
    }); 
    })}); 

Answer 1

var waypoint = new Waypoint({ 
      element: $(".test")[2], 
      handler: function(direction) { 
       alert('Scrolled to test4!'+direction); 
      }, 
      offset: '20%' 
       //offset:100 //offset top you should append this property. 
     })