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

我有一些级别相同但高度不同的div。我想在当前窗口框中显示的所有div上添加一个highlight类（窗口框可滚动）

我试过这个密码

$('.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的末尾。为什么不同时检查顶部和底部

$('#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
    }
});

---

创建一个fiddle@Ish我无法创建我所拥有的代码，因为它是动态的，但在这里它是一个更苗条的问题。请试穿一下。