如果滚动到视图但不是已在视图中的元素，则将类添加到元素

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
 }