Question

当元素在视口中变得可见而不是在页面加载时，我尝试执行下面的Jquery函数。我需要改变什么以允许这种情况发生？我使用外部JS文件来执行Jquery，所以请记住这一点。

这是与Jquery函数关联的HTML片段 -

          <div class="skillbar clearfix " data-percent="70%">
            <div class="skillbar-title" style="background: #FF704D;"> 
                  <span>Illustrator</span></div>
            <div class="skillbar-bar" style="background: #FF704D;"></div>
            <div class="skill-bar-percent">70%</div>
          </div>


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

Answer 1

这可能适合你。

   var el             = $('.yourElement'),
       offset         = el.offset(),
       scrollTop      = $(window).scrollTop();
   //Check for scroll position
   if ((scrollTop > offset.top)) {
       // Code..
   }

Answer 2

我曾遇到过这样的问题，我使用的是waypoints小型库。

您只需要包含此库并执行：

var waypoint = new Waypoint({
  element: document.getElementById('waypoint'),
  handler: function(direction) {
    console.log('Element is in viewport');
  }
})

Answer 3

使用CSS3过渡代替jQuery动画可能更高效，更简单。一种廉价而讨厌的方式将其推出屏幕以证明其效果。

还有一些你需要做的事情 - 首先如果你只想让动画在视口中触发，那么你需要检查是否有什么东西是在滚动视口中。然后只在进入视图时更新条形宽度。如果您想要在每次进入视口时重复效果，如果它已经超出视口，则需要将.skillbar-bar的宽度设置为0（只需添加其他内容）视口检查if）

的语句

我在.skillbar中添加了一个1000px的margin-top和400px margin-bottom作为一种廉价而讨厌的方式来展示效果

＆＃13;

(function($){
  $(document).ready(function(){
    var $els = $('.skillbar'); // Note this must be moved to within event handler if dynamically adding elements - I've placed it for performance reasons 
    var $window = $(window);
    
    $window.on('scroll', function(){
      $els.each(function(){ // Iterate over all skillbars
        var $this = $(this); 
        if($window.scrollTop() > $this.offset().top - $window.height()){ // Check if it's in viewport
          $this.find('.skillbar-bar').css({'width' : $this.attr('data-percent')}); // Update the view with percentage
        }
      });
    
    });
  });
}(jQuery));

＆＃13;

.skillbar{
  margin-top: 1000px;
  margin-bottom: 400px;
  position: relative
}

.skillbar-bar{
  transition: width 4s;
  position: absolute;
  height: 20px;

}

.skill-bar-percent{
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Scroll down 1000px :)
<div class="skillbar clearfix " data-percent="70%">
            <div class="skillbar-title"> 
                  <span>Illustrator</span></div>
            <div class="skillbar-bar" style="background: #FF704D; width: 20%"></div>
            <div class="skill-bar-percent">70%</div>
          </div>

＆＃13;

仅当元素位于视口中时才运行Jquery

3 个答案: