javascript - 当部分的顶部等于或高于主面板的顶部时发出类警报

Question

我有一个固定面板，其内容由 div 滚动和分隔。当任何内容的 div TOP 到达面板 TOP 时，我会在该 div 的类中出现一个警报。

每个 div 都有一个这样的类 <div class="section-proceso anc1"> (每个 div 中包含的两个类都以 section- 和 anc 开头，如果需要可以添加新类)

LIVE DEMO

我试过这样的事情，但没有结果:

if ($("div[class^='anc']").offset().top >= $('.contentPanel').offset().top){
   alert($(this).attr('class'));
}

Answer 1

使用这个:

$(".contentPanel").scroll(function () {
    $("div[class*='anc']").each(function() {
        $this = $(this);
        var TopView = $('.contentPanel').offset().top;
        var TopElement = $this.offset().top;
        if (TopElement <= TopView && !$(this).hasClass('Appear')){
            $(this).addClass('Appear');
            alert($(this).attr('class'));
        }

        if (TopElement >= TopView && $(this).hasClass('Appear')){
            $(this).removeClass('Appear');
            alert($(this).attr('class'));
        }
    });
});

您永远不会看到上一节的警报，因为您提到“当任何内容的 div TOP 到达面板 TOP 时，该 div 的类会出现警报。”最后一部分的顶部永远不会到达面板的顶部。

注意:Appear 类用于防止在每次滚动时重复提醒，只有在到达某个部分时才会看到提醒，而当您到达该部分的末尾时 Appear 类已被删除，因此您仅在从顶部或底部到达某个部分时才会看到警报，而在向下或向后滚动部分表单时不会看到重复的恼人警报。

Check JSFiddle Demo