Jquery 为到达页面顶部的每个div切换类

我试图找到一种方法，在包含类“.dark”的每个div到达页面顶部时，将类添加到固定元素并将其删除

我这里有一个工作示例，它适用于“.dark”的第一个实例

但我似乎无法让它为第二个实例的类工作

守则：

jQuery(document).ready(function(){
var hieghtThreshold = $(".dark").offset().top;
var hieghtThreshold_end  = $(".dark").offset().top +$(".dark").height() - 25 ;
    $(window).scroll(function() {

            $('.dark').each(function() {

            var scroll = $(window).scrollTop();
            if (scroll >= hieghtThreshold && scroll <=  hieghtThreshold_end ) {
                $('header').removeClass('active');
            }
            else {
                $('header').addClass('active');
            }

            });
    });
});

jQuery（文档）.ready（函数（）{
var hightThreshold=$（“.dark”）.offset（）.top；
var hightThreshold_end=$（“.dark”）.offset（）.top+$（“.dark”）.height（）-25；
$（窗口）。滚动（函数（）{
$（'.dark'）。每个（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（scroll>=hightThreshold&&scroll，则可能更容易找到具有所需坐标的元素。
我们将搜索位于徽标正下方的元素

var searchClass = 'dark';
var logoHeader = $('header');
var height = logoHeader.height();
$(window).scroll(function() {
        var elem = document.elementFromPoint(0,height);
        var eClass = $(elem).attr('class');
        classes = (eClass == undefined ? [] : eClass.split(' '));
        (classes.indexOf(searchClass) > -1 ? 
            logoHeader.addClass('active') :
            logoHeader.removeClass('active'));                  
    });
});


如何测试？这是一个文件，我在其中添加了@media（最大宽度：480px），如果屏幕小于480px，那么头元素将变为60px，脚本将确定其高度并正确确定坐标。
您正在计算第一个.dark元素的阈值…您知道我将如何计算.dark的其他实例吗？或者为我指出正确的方向？如果这些元素的位置从未改变，您可以预先计算它们，并将它们放入数组中，或者将它们作为相关元素上的自定义数据存储精灵。但是如果方向改变、窗口大小、字体大小改变或缩放改变了其中任何一个位置，你当然需要重新计算它们。啊，这看起来容易多了，而且非常接近！有没有办法让它与多个类一起工作？例如class=“bgWhite dark另一个类”？啊，该死-虽然这种方法适用于桌面、平板电脑和移动设备，但页眉元素预计会发生变化，因此坐标不正确。坐标可以分别适用于不同的形状因子。我想，几乎在那里！当你说形状因子时，你的意思是这样吗？-目前不起作用更新的注释，附加的测试文件