检查带类的元素是否在视口中可见

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));