The code I have implemented reflects my intentions.
html:
<div id="one" class="box"></div>
<div id="two" class="box"></div>
<div id="thr" class="box"></div>
<div id="fou" class="box"></div>
<div id="fiv" class="box"></div>
<div id="six" class="box"></div>
script:
$(document).ready(function(){
$(window).scroll(function(){
$('.box').each(functions(e){
if($(this).offset().top <= 0) {
$(this).css('background-color','green');
}
});
});
});
css:
div {
position:relative;
width:100%;
height:300px;
background-color:orange;
margin:10px;
}
fiddle: http://jsfiddle.net/VR4ca/
When scrolling, the box at the top should change its background color to green until the next box reaches the top of the window
Your assistance is appreciated.
Even after making changes, the code does not seem to work as expected http://jsfiddle.net/VR4ca/2/