FadeOut，如果使用jquery visible.js可见

Question

我希望div进入视口后立即消失

我正在使用jquery visible.js插件https://github.com/customd/jquery-visible

这可能是一个简单的修复程序，但是我已经被卡住了一段时间了，有什么建议吗？

<section class="section2"><div class="overlay"></div></section>

JS

$(window).scroll(function() {
    if ($('section.section2').visible()) {

 $('.overlay').fadeOut(500);
    } 
});

最初我正在使用它，但是它正在工作，但是它在移动设备上出现故障，所以我只希望它逐渐消失而不是再次进入

$(window).scroll(function() {
    if ($('section.section2').visible()) {
// The element is visible, do something
 $('.overlay1').fadeOut(600);
    } else {
 $('.overlay1').fadeOut(600);
// The element is NOT visible, do something else
  }
});

Answer 1

不要使用事件监听器来执行此操作，您应该为此使用Intersection Observer (IO)。使用IO，您可以检查元素何时进入视口（或彼此重叠）并对其做出反应，具体取决于它们重叠的百分比。

首先，您必须为IO指定要监听的参数的选项：

let options = {
  rootMargin: '0px',
  threshold: 1.0
}
let observer = new IntersectionObserver(callback, options);

由于您希望对可见的元素做出100％的反应，因此请使用1.0的阈值

下一步是您指定要观看的元素：

let target = document.querySelector('.section2');
observer.observe(target);

最后一步是定义元素可见后应该发生的事情：

let callback = (entries, observer) => { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element
  });
};

let options = {
  rootMargin: '0px',
  threshold: 1.0
}


let callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      $(entry.target).find('.overlay').fadeOut();
    }
  });
};

let observer = new IntersectionObserver(callback, options);
let target = document.querySelector('.section2');
observer.observe(target);

.h100 {
  min-height: 100vh;
}

.section2 .overlay {
  background-color: grey;
  margin-top: 10px;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="h100">
</div>
<section class="section2">
  Watch me stay 
  <div class="overlay">
    Watch me disappear
  </div>
</section>
<div class="h100">
</div>