javascript 类.visible

Posted 2021-05-04

function addClassIfVisible() {
  $('.hideme').each(function(index, item) {
    if (isElementInViewport(item)) {
      $(item).addClass('visible');
    } 
    else {
      $(item).removeClass('visible');
    }
  });
}

$(function() {
  $(window).on('DOMContentLoaded load resize scroll', addClassIfVisible); 
});

function isElementInViewport(el) {
  // special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (
      rect.top <= 0 &&
      rect.bottom >= 0
    ) ||
    (
      rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    ) ||
    rect.top >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
  );
}