0

I try to make something like infinite scroll, but I don't know how to load content only when the last of div.nextpage is in viewport. I am using viewport JQuery plugin. When its loaded, it should again only work with the last one instance, which is loaded with new content.

In my case the content is loading when the first .nextpage appears in viewport, and then function is unbind.

My code:

function check_nextpage(event) {
$('.nextpage:in-viewport').each(function() {
$(window).unbind('scroll', check_nextpage);
alert('loading content');
});
}


$(document).ready(function() {
$(window).bind('scroll', check_nextpage);

});

The HTML

<content.....>
<a href="../test.html" class="nextpage1">next page</a>
<content.....>
<a href="../test.html" class="nextpage1">next page</a>
Nicolas Henneaux
  • 11,507
  • 11
  • 57
  • 82
Paweł Villie
  • 1
  • take a look at http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport – the8472 Jan 27 '15 at 18:09
  • thats only for telling that element is in viewport. i use plugin jquery.viewport and i can use selector :in-viewport which tells me if the element is in vp but i dont know how to check if THE LAST OCCURRENCE of html class element is in vp – Paweł Villie Jan 29 '15 at 09:38

1 Answers1

0

Try $('.nextpage').last().filter(":in-viewport") or .is(":in-viewport")

http://api.jquery.com/last/
http://api.jquery.com/filter/
http://api.jquery.com/is/

the8472
  • 40,999
  • 5
  • 70
  • 122