クラスがあるセクションが表示されているかどうかを確認するjQuery

Question

これは他のバリエーションのバリエーションです。.js-visibleをDOMの任意の要素に割り当て、表示されている場合にのみ.visibleクラスに割り当てます。

すべての要素が同じクラス名を使用しているので、難しい部分です.js-visible私はクラス.visibleを可視要素に割り当て、同じクラス名を持つ他のすべてのDOM要素を無視する必要があります。それが見えたともはやない場合、クラス名.visible

<style> 
    .visible { 
     background: green; 
    } 
</style> 

<div class="js-visible" style="height:800px">I am 1st</div> 
<div class="js-visible" style="height:800px">I am 2nd</div> 
<div class="js-visible" style="height:800px">I am 3rd</div> 
<div class="js-visible" style="height:800px">I am 4th</div> 

これを削除したい

$(window).scroll(function() { 
     var hT = $('.js-visible').offset().top, 
      hH = $('.js-visible').outerHeight(), 
      wH = $(window).height(), 
      wS = $(this).scrollTop(); 
     if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){ 
      $('.js-visible').addClass('visible') 
     } else { 
      $('.js-visible').removeClass('visible') 
     } 
    }); 

任意の提案として機能していませんか？

Answer 1

コードに基づいて、この関数は機能しているようです。 各要素を個別にチェックする必要があります。

$(window).scroll(function() { 
 
    var wH = $(this).height(), 
 
     wS = $(this).scrollTop(); 
 
    $('.js-visible').each(function() { 
 
     var hT = $(this).offset().top, 
 
      hH = $(this).outerHeight(); 
 
      
 
     if (wS >= (hT+hH-wH) && (hT >= wS) && (wS+wH >= hT+hH)){ 
 
       $(this).addClass('visible') 
 
      } else { 
 
       $(this).removeClass('visible') 
 
      } 
 
     }); 
 
    });

.visible { 
 
     background: green; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<style> 
 
    .visible { 
 
     background: green; 
 
    } 
 
</style> 
 

 
<div class="js-visible" style="height:200px">I am 1st</div> 
 
<div class="js-visible" style="height:200px">I am 2nd</div> 
 
<div class="js-visible" style="height:200px">I am 3rd</div> 
 
<div class="js-visible" style="height:200px">I am 4th</div>

Answer 2

私は、あなたのプロジェクトに適応することができ、同じソリューションを必要とする人のためのソリューションのデモを投稿したいと思います

$.fn.isInViewport = function() { 
 
    var elementTop = $(this).offset().top; 
 
    var elementBottom = elementTop + $(this).outerHeight(); 
 

 
    var viewportTop = $(window).scrollTop(); 
 
    var viewportBottom = viewportTop + $(window).height(); 
 

 
    return elementBottom > viewportTop && elementTop < viewportBottom; 
 
}; 
 

 
$(window).on('resize scroll', function() { 
 
    $('.js-visible').each(function() { 
 
    
 
     var activeColor = $(this).attr('id'); 
 
    if ($(this).isInViewport()) { 
 
     $(this).addClass('visible'); 
 
    } else { 
 
     $(this).removeClass('visible'); 
 
    } 
 
    }); 
 
});

.visible { 
 
     background: green; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div class="js-visible" style="height:800px">I am 1st</div> 
 
<div class="js-visible" style="height:800px">I am 2nd</div> 
 
<div class="" style="height:800px">I am something else</div> 
 
<div class="" style="height:800px">I am something else</div> 
 
<div class="js-visible" style="height:800px">I am 3rd</div> 
 
<div class="js-visible" style="height:800px">I am 4th</div>