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) . С помощью ввода-вывода вы можете проверить, когда элементы попадают в область просмотра (или перекрываются друг с другом) и реагировать на это, в зависимости от того, на сколько процентов они перекрываются.

Сначала вы должны указать параметры ввода-вывода, для которых параметры выхочу слушать:

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>