affect another div after a specific div is no longer visible from scrolling down the page

Question

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

Here is the code I have so far 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');  
     }
});

I am trying to get the background of div.world to blue when the div.hello is no longer in view after scrolling down the page. But its not working. I must be doing something wrong or missing something. — Display name, Jun 17 '14 at 04:40
You can use scrollTop functionality to make your logic happen.... — Bhojendra Rauniyar, Jun 17 '14 at 04:41
I'm trying to use the :visible selector http://api.jquery.com/visible-selector/ — Display name, Jun 17 '14 at 04:43
The element is always *visible* as far as whether its visible or hidden, you need to use Javascript to determine whether it's inside your viewable area or not — scrowler, Jun 17 '14 at 04:44
From jquery page: Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero. http://api.jquery.com/visible-selector/ — Ignacio Laborde, Jun 17 '14 at 04:45
Refer : http://stackoverflow.com/questions/8897289/how-to-check-if-element-is-off-screen — Okky, Jun 17 '14 at 05:46

aandis · Answer 1 · 2014-06-17T04:52:05.913

The element is not hidden until you explicitly set its visibity : hidden. It's just scrolled down. For your task, you might want to use the jquery appear plugin. Works like a charm. Once set up, 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 disappear function, if you'd like.

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

affect another div after a specific div is no longer visible from scrolling down the page

1 Answers1