Run the script when the div is displayed in the browser window

Question

I need to run some JavaScript when the div displayed in the browser window, for example, when it scrolls, even repeatedly. How can i do this?

The 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 question / solution provided, here is the full implementation ...

When loading, we run a function to assign visible divs to the appropriate color. In the jQuery scroll handler, we continue to call the function to assign a 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"); } 

Answer 2

Since you mean using jQuery, you may look like

 if($('#element').is(':visible')) { //do your thing }