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

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
 }