Run script when div is visible in browser window

Question

I need to run some JavaScript when a div is visible in the browser window, for example, when it is scrolled to, even repeatedly. How would I go about doing so?

Basic structure:

<div class='page1'></div>

<div class='page2'></div>

<div class='page3'></div>

<div class='page4'></div>

CSS:

div {
    float: left;
    height: 500px;
    width: 500px;
    margin: 50px 0;
    background: grey;
}

Fiddle: http://jsfiddle.net/Q5BUe/1/

Answer 1

As with the other provided question/solution, here is the full implementation...

Upon loading, we run the function to assign the visible divs with the corresponding color. On jQuery scroll handler, we continue to call the function to assign the new background color.

http://jsfiddle.net/Q5BUe/5/

$(allInView);
$(window).scroll(allInView);


function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function allInView() {

    if (isScrolledIntoView($(".page1"))) $(".page1").css("backgroundColor", "red");
    else $(".page1").css("backgroundColor", "grey");

    if (isScrolledIntoView($(".page2"))) $(".page2").css("backgroundColor", "green");
    else $(".page2").css("backgroundColor", "#333");

    if (isScrolledIntoView($(".page3"))) $(".page3").css("backgroundColor", "yellow");
    else $(".page3").css("backgroundColor", "#222");

    if (isScrolledIntoView($(".page4"))) $(".page4").css("backgroundColor", "blue");
    else $(".page4").css("backgroundColor", "#111");

}