Добавить класс к элементам, если прокручивается в поле зрения, но нет элементов уже в поле зрения

Question

Я использую приведенный ниже код для добавления класса на выбранный элемент при прокрутке в порт просмотра.

HTML ниже:

<?php
$counter=1;
while ( have_posts() ) : the_post(); ?>         
  <div id="archiveItem-<?php echo $counter; ?>" class="mydiv floatLeft">
    <a href="<?php the_permalink();?>">
     <img src="placement.jpg" alt="">
     <h3><?php the_title(); ?></h3>
    </a>
  </div>            
 <?php
 $counter++;
endwhile; ?>


function isScrolledIntoView(elem) {

    if (!jQuery(elem).length) return false;

    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

    var elemTop = jQuery(elem).offset().top;
    var elemBottom = elemTop + jQuery(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}

jQuery(window).scroll(function () {

    jQuery('.mydiv').each(function () {
        if (isScrolledIntoView(this)) {
            jQuery(this).addClass('divshow');
        }
    });

});

Это работает нормально, но я хотел бы добавить только класс к div, которые не находятся в области просмотра. В настоящее время он добавляет класс ко всем элементам div, пока не прокручивается в поле зрения.

Смотрите пример ниже:

На скриншоте первые две строки div (1-10) не должны иметь добавленный класс, поскольку они видны, но нижеприведенные div (15-20) не видны и должны иметь добавленный класс при прокрутке.

Любая помощь приветствуется

Спасибо

Answer 1

Используя приведенный ниже код, вы можете проверить, является ли div видимым или нет, и соответственно применить классы

 if( ($(window).outerHeight()+$(window).scrollTop()) > $('#div').offset().top)
 {
      //your code here
 }