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

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

1 个答案: