Triggering Jquery at certain length of page

Question

I'm trying to figure how to trigger an jquery animation when the user scrolls to the middle of the page. Is there a way to set a listener to see if the person scrolls halfway down the page it activates the jquery code?

Answer 1

Using jQuery, you can attach an event handler to the scroll event, which will let you listen to whenever the window is scrolled and determine whether the user has scrolled the appropriate amount.

$(window).scroll(function () { 
    if (($(window).scrollTop()) > ($(document).height() / 2)) {
        // Run animation here
    }
});

http://jsfiddle.net/ult_combo/XdqPJ/1/

Answer 2

Think so.. you can look at checking parts of the page using; setInterval(name_Of_Function,1000);

runs every second, then run a check on there is; window.pageYOffset // Gives you current horizontal window scroll position for the page.

Firebug is helpful to get more information on these functions. Remember to check in all major browsers as the implementation or values returned may be slightly different between different browsers.

Good reference page I found; http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

Answer 3

Is there a way to set a listener to see if the person scrolls halfway down the page it activates the jquery code?

You can get the amount that the user has scrolled with the following:

$("html,body").scrollTop();

so, to trigger an event halfway down the page:

if (($("html,body").scrollTop()) > ($("html,body").height() / 2))
{
    // Code that will be triggered
}

You would need a timer to constantly be checking this. You can use setInterval() in Javascript to repeatedly execute a function to check this.

http://api.jquery.com/scrollTop/