How to load an ajax only when user scrolls down to that area

Question

We have a website that has a "comments" area we are looking for a way to only begin loading the ajax related to comments once the user actually scrolls down to the comments area.

Many users don't even reach there and we don't want to load the ajax for nothing.

Basically we are loading the comments like this:

$('#commentload').load(<?php echo "'" . base_url() . "ajax/comments'"; ?>);

inside an area called:

<div id="commentload"></div>

What should we add to it so that it only starts the load when user reaches the bottom of the 1/4th bottom of the page?

Answer 1

if(window.pageYOffset>x)将x设置为像素值

Answer 2

You might want to check out appear plugin .

Essentially -

$("#commentload").on('appear', function(event, $element) {
    // ajax call
}

Answer 3

Try following:

var pos = $("#commentload").offset().top;
$( window).scroll(function() {
    var scroll = $(window).scrollTop();
   if(scroll >= pos)
   {
     //Your code
   }
});