クラスのある要素がビューポートに表示されているかどうかをチェックします。

Question

クラスが現在ビューポートに表示されているかどうかを検出しようとしています。私はこれを使用していますanswer（私の質問に返信することはできません）。元のポストはクラスの代わりにIDを使用していましたが、私は.white-sectionというクラスを検出するように変更しました。

最初は.white-sectionが検出されましたが、どのようにしてそれらを検出してビューポートに移動することができますか？

$('#content').scroll(function() { 
    var top_of_element = $(".white-section").offset().top; 
    var bottom_of_element = $(".white-section").offset().top + $(".white-section").outerHeight(); 
    var bottom_of_screen = $(window).scrollTop() + $(window).height(); 
    var top_of_screen = $(window).scrollTop(); 

    if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){ 
     $('.header-container').addClass('.alt-menu'); 
    } 
    else { 
     $('.header-container').removeClass('.alt-menu'); 
    } 
}); 

これは、HTMLを設置している方法です：

<div class="header-container"></div> 

<div class="white-section"></div> 
<div class="white-section"></div> 
<div class="white-section"></div> 
<div class="white-section"></div> 
<div class="white-section"></div> 

Answer 1

は以下を試してみてください。要素をループして条件に合致する要素を見つけようとします。もしあれば、クラスを追加します。私はまた、いくつかのわずかなスロットリングをソリューションに追加し、スクロールイベントが高速になるようにルックアップをキャッシュしました。白い部分は、ヘッダー・コンテナに関連するにはどうすればよい

(function($) { 
 
    var scrollingIsThrottled = false; 
 
    var $allWhiteSections = $(".white-section"); 
 
    var $window = $(window); 
 
    var $headerContainer = $('.header-container'); 
 

 
    $('#content').scroll(function() { 
 
    if (!scrollingIsThrottled) { 
 
     scrollingIsThrottled = true; 
 

 
     var $whiteSpaceMatchingExpression = $allWhiteSections.filter(function() { 
 
     var $this = $(this); 
 
     var top_of_element = $this.offset().top; 
 
     var bottom_of_element = $this.offset().top + $this.outerHeight(); 
 
     var bottom_of_screen = $window.scrollTop() + $window.height(); 
 
     var top_of_screen = $window.scrollTop(); 
 

 
     return ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)); 
 
     }); 
 
     
 
     if ($whiteSpaceMatchingExpression.length) { 
 
     $headerContainer.addClass('alt-menu'); 
 
     } else { 
 
     $headerContainer.removeClass('alt-menu'); 
 
     } 
 
     
 
     scrollingIsThrottled = false; 
 
    } 
 
    }); 
 
}(jQuery));