CODEWITHSUNDEEP
javascripthtml
Seth Spivey
Seth Spivey

Reputation: 367

Run Jquery only when an element is in the viewport

I'm trying to perform the Jquery function below when the element becomes visible in the viewport rather than on the page load. What would I need to change to allow that to happen? I'm using an external JS file to perform the Jquery, so keep that in mind.

Here's a piece of the HTML that is associated with the Jquery function - 

          <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);
   });
 });

Upvotes: 0

Views: 1932

Answers (3)

Fernando Salas
Fernando Salas

Reputation: 406

This might work for you.

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

Upvotes: 0

Brian
Brian

Reputation: 2952

Using CSS3 transitions instead of jQuery animations might be more performant and simpler. a cheap and nasty way of pushing it out of screen to demonstarate the effect.

There's a couple of things you'll need to do - firstly if you only want the animation to trigger when it's in the viewport then you'll need to check if anything is in the viewport on scroll. Then only update the bars width when it comes into view. If you want the effect to repeat every time it comes into viewport you'll need to set .skillbar-bar's width back to 0 if it's out of the viewport (just add an else statement to the viewport checking if)

I've added a 1000px margin-top and 400px margin-bottom in my example to .skillbar as a cheap and nasty way of demonstrating the effect

(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));
.skillbar{
  margin-top: 1000px;
  margin-bottom: 400px;
  position: relative
}

.skillbar-bar{
  transition: width 4s;
  position: absolute;
  height: 20px;

}

.skill-bar-percent{
  position: absolute;
}
<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>

Upvotes: 0

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

I once came across such problem and what I used is waypoints small library.

all you need is to include this library and do:

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

Upvotes: 1

Related Questions