javascript - Run Jquery only when an element is in the viewport -


i'm trying perform jquery function below when element becomes visible in viewport rather on page load. need change allow happen? i'm using external js file perform jquery, keep in mind.

here's piece of html associated 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);    });  }); 

i once came across such problem , used waypoints small library.

all need include library , do:

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

Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -