I wanted to have a page that load the content only when it reached that section by scrolling, just like what pinterest website was doing.
What is the design of implementing it or are there a plugin to do that? Please help.
asked Aug 28, 2012 at 0:37
-
1I've heard it referred to as infinite scrolling. You might want to search for tutorials on that.BillRobertson42– BillRobertson422012-08-28 00:43:24 +00:00Commented Aug 28, 2012 at 0:43
-
Oh yea you are right... infinite scrolling.LittleFunny– LittleFunny2012-08-28 00:59:26 +00:00Commented Aug 28, 2012 at 0:59
-
What have you tried? This has two pieces--Figuring out when the user has reached a point on the page and loading and appending the new data. Check out the waypoints plugin if you're having trouble with the first part.Andrew Whitaker– Andrew Whitaker2012-08-28 01:17:09 +00:00Commented Aug 28, 2012 at 1:17
Add a comment
|
2 Answers
$(window).on( "scroll" , function() {
var $document = $(document);
var $window = $(this);
if( $document.scrollTop() >= $document.height() - $window.height() - 400 ) {
// do something
}
});
Where 400 is your offset from the bottom of the page. There are plugins that do this but this is some simple code to do it. I recommend using underscorejs to throttle this function because this function will fire every time the scroll top changes. So for every pixel it will trigger. Generally I throttle it to only run every 60 frames per second.
Comments
There is a Lazy Load Plugin for jQuery if you want to try that:
