Question

例如：我想在向下滚动页面后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');  
     }
});

Answer 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
});

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

1 个答案: