In this article, I am going to show you how you can load certain portion of code only when the content is scrolled down and appeared on the screen. i.e to the viewport. To load content on scrolling we need a jQuery plugin named viewport. It is one of the easiest to use for such types of operation. I am using Barfiller jQuery plugin to demonstrate the plugin. It will start progressing once scroll down to that portion.

The end result will be something like this:  Demo | Download Code

To load content on scrolling, first Download bar filler and viewport plugin.

Link the viewport JS file to the head ( I have added on the head). It should work before the close of the body tag too. I have included the bar-filler plugin on the footer.

 <script src="jquery.js" type="text/javascript"></script>
 <script src="jquery.viewport.js" type="text/javascript"></script>
<script src="js/jquery.barfiller.js" type="text/javascript"></script>

The Viewport is just some special selector added to our jQuery. It adds the following selector. Please check  the site of Viewport to have more information.

 $(":in-viewport")
 $(":below-the-fold")
 $(":above-the-top")
 $(":left-of-screen")
 $(":right-of-screen")

Now The code that you want to appear once after it loaded to the viewport, i.e to load content on scrolling , add a div with any id. I have added a div with id named “progress”.

<div id="progress" class="waypoint"> 
	<div id="bar1" class="barfiller">
	    <div class="tipWrap">
			<span class="tip"></span>
		    </div>
		    <span class="fill" data-percentage="50"></span>
		</div>
		
		<div id="bar2" class="barfiller">
		    <div class="tipWrap">
			<span class="tip"></span>
		    </div>
		    <span class="fill" data-percentage="35"></span>
		</div>	
		
		<p>You can set different colors...</p>
		
		<div id="bar3" class="barfiller">
		    <div class="tipWrap">
			<span class="tip"></span>
		    </div>
		    <span class="fill" data-percentage="75"></span>
		</div>	

		<p>And you can set different durations....</p>
		
		<div id="bar4" class="barfiller">
		    <div class="tipWrap">
			<span class="tip"></span>
		    </div>
		    <span class="fill" data-percentage="95"></span>
		</div>	
		
		<p>Reanimates on browser/device resize too!</p>
	
</div>

Now add the following code to the end of the body. i.e before </body>

<!-- Following code is a combination of barfiller and viewport loader -->
<script type="text/javascript">

$(document).ready(function(){
// reference site for this plugin 
//http://www.appelsiini.net/projects/viewport
	 $(window).bind("scroll", function(event) { // this checks if the scroll event is occurs
	    $("#progress:in-viewport").each(function() { // this is the selector for viewport. check the link above for more info
	    	// line belows are pure barfiller. we can load anything using the pattern above
			$('#bar1').barfiller();
			$('#bar2').barfiller();
			$('#bar3').barfiller({ barColor: '#fc6' });
			$('#bar4').barfiller({ barColor: '#900', duration: 3000 });
	  
		});
	});	
});

</script>

Here, after the document is ready we are checking for the scroll event. then each scrolled event we are selecting the special selector provided by viewport plugin :in-viewport. then for each item, we are calling the bar filler. You can call any code here.

You are done! Hope you understood. Let me know if you have any problem. If you have a better solution, please let me know by commenting.