在向下滚动页面不再可见特定 div 后影响另一个 div答案

【问题标题】：affect another div after a specific div is no longer visible from scrolling down the page在向下滚动页面不再可见特定 div 后影响另一个 div
【发布时间】：2014-06-17 04:37:23
【问题描述】：

例如：当 div.hello 在向下滚动页面后不再可见时，我想将 div.world 的背景更改为蓝色。

这是我目前拥有的代码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');  
     }
});

【问题讨论】：

当向下滚动页面后 div.hello 不再出现时，我试图将 div.world 的背景设置为蓝色。但它不起作用。我一定是做错了什么或错过了什么。
这不是隐藏，而是向上滚动...
您可以使用 scrollTop 功能来实现您的逻辑......
我正在尝试使用 :visible 选择器api.jquery.com/visible-selector
元素总是可见，无论它是可见还是隐藏，你需要使用Javascript来确定它是否在你的可视区域内

标签： jquery

【解决方案1】：

在您明确设置其visibity : hidden 之前，该元素不会隐藏。它只是向下滚动。对于您的任务，您可能希望使用jquery appear plugin。奇迹般有效。设置完成后，只需执行 -

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

如果您愿意，也可以使用消失功能。

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

【讨论】：