Trigger events when the window is scrolled to certain positions

You can use onscroll

function testScroll(ev){
    if(window.pageYOffset>400)alert('User has scrolled at least 400 px!');
}
window.onscroll=testScroll

If you want a jQuery solution you can use scroll.


A popular plugin for what you're describing is jQuery Waypoints.


If you don't wish to use a plugin, the mechanisms are:

$(window).scrollTop(); // returns pixel value
$(window).scroll(function () { /* code here */ });

However, because the scroll event fires very quickly, you must be careful to put only code that executes quickly inside the handler. A common technique is to "throttle" the rate at which you handle the event by checking if a certain amount of time has passed.


if you dont want to use plugin you may try this

function isScrolledIntoView(elem)
        {
        //alert("method invoked");
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <=      docViewBottom) && (elemTop >= docViewTop));

        }

I had used this function to load images as lazy load. Called this function on scroll and then sent an ajax request based on the value of function returning value. this will send the ajax request when the user had scrolled to the bottom of the element (i.e used as the parameter in the method).

if(isScrolledIntoView($('.items:last'))){
    //send the ajax request here 
}

this is my first answer on this site. I hope you have will understand