как запускать функцию когда блок появился на экране?

Question

как можно отлавливать событие когда элемент появился на экране?

Answer 1

$(document).ready(function() {
  var windowHeight = $(window).height();
  $(document).on('scroll', function() {
    $('.block').each(function() {
      var self = $(this),
        height = self.offset().top + self.height();
      if ($(document).scrollTop() + windowHeight >= height) {
        self.addClass('active')
      }
    });
  });
});

.block {
  width: 100px;
  height: 100px;
  background: black;
  margin-top: 500px;
}

.active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block"></div>

БЛОГ НА HUSL

как запускать функцию когда блок появился на экране?

Ответы (1 шт):