javascript - 突出显示滚动窗口中当前显示的所有 div

Question

我有一些具有相同类别但不同高度的 div。我想在当前窗口框架中当前显示的所有 div 上添加突出显示类(窗口框架是可滚动的)。

我尝试了这段代码

$('.l3_box').each(function () {
    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    /* If the object is completely visible in the window, fade it it */
    if (bottom_of_window > bottom_of_object) {
        $('#tab_out01 .l3_box').removeClass("testt");
        $(this).addClass("testt");

    }
});

当我的 div 大小等于或小于窗口大小时，这可以正常工作。但是当我的 div 大小远高于窗口的大小时，它不起作用，直到我到达 div 的末尾。

Answer 1

为什么不同时检查顶部和底部？

$('#tab_out01 .l3_box').removeClass("testt");
$('.l3_box').each(function () {
    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
    var top_of_object = $(this).offset().top;
    var center_of_window = $(window).scrollTop() + $(window).height() / 2;

    /* If the object is completely visible in the window, fade it it */
    if (bottom_of_object > center_of_window && center_of_window > top_of_object) {
        $(this).addClass("testt");
        return false; // break
    }
});