Affect another div after a particular div is no longer displayed when scrolling a page

Question

For example: I want to change the background of div.world to blue when div.hello is no longer displayed after scrolling the page.

Here is the code that I still have http://jsfiddle.net/cJWAr/140/

<div id="cat">
<div class="hello">hello</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="world">world</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

$( document ).ready(function() {
   if ($('.hello').is(":visible") ){
    $('.world').addClass('red');       
    }
    else if  ($('.hello').is(":hidden") ){
    $('.world').addClass('blue');  
     }
});

Answer 1

An element is not hidden until you explicitly set it visibity : hidden. He just scrolled down. For your task you can use the jquery plugin . It works like a charm. After setting, just do -

$('.hello').appear(function() { //if the element is visible, change the background to something else
  $('.world').css({'background':'your-background'});
});

You can also use the fade function if you want.

$('someselector').on('disappear', function(event, $all_disappeared_elements) {
  // this element is now outside browser viewport
});