如何在页面视图中触发jQuery？

Question

我想要从导航栏中选择部分或在滚动时查看部分时启动此动画.
示例代码:
HTML:

    <section id="section-skills" class="section appear clearfix">
            <div class="container">
                <div class="row mar-bot40">
                    <div class="col-md-offset-3 col-md-6">
                        <div class="section-header">
                            <h2 class="section-heading animated" data-animation="bounceInUp">Skills</h2>
    </div>
</div>
</div>
</div>
<div class="container">
                <div class="row" >
                <div class="col-md-6">
<div class="skillbar clearfix " data-percent="80%">
    <div class="skillbar-title" style="background: #333333;"><span>Java</span></div>
    <div class="skillbar-bar" style="background: #525252;"></div>
    <div class="skill-bar-percent">75%</div>
</div> <!-- End Skill Bar -->

<!--REST OF THE CODE FOLLOWS AS IN THE EXAMPLE LINK PROVIDED-->

 </section>

我尝试waypoint在jQuery中使用,但它不起作用.

jQuery(document).ready(function(){
  $('#section-skills').waypoint(function(direction) {  
    jQuery('.skillbar').each(function(){
        jQuery(this).find('.skillbar-bar').animate({
            width:jQuery(this).attr('data-percent')
        },6000);
    });
});
});

任何解决方案都会非常有用.

Answer 1

使用.position().top获取 .skillbar 的顶部位置。

然后使用.scroll()事件通过.scrollTop().valueOf()获取窗口滚动到的当前位置。

当 .scrollTop 值足够接近 .skillbar 的顶部位置时，该元素必须在视图中，因此您可以将其设置为何时调用动画的条件。

jQuery(document).ready(function(){
  var skillBarTopPos = jQuery('.skillbar').position().top;
  jQuery(document).scroll(function(){
    var scrolled_val = $(document).scrollTop().valueOf();
    if(scrolled_val>skillBarTopPos-250) startAnimation();
  });

  function startAnimation(){
    jQuery('.skillbar').each(function(){
      jQuery(this).find('.skillbar-bar').animate({
        width:jQuery(this).attr('data-percent')
      },6000);
    });
  };

});

http://api.jquery.com/position/

如何使用 jQuery 检测页面的滚动位置

http://api.jquery.com/scrollTop/#scrollTop2