jquery - 检查元素是否在 View 中，如果是，则添加类

Question

我想堆叠元素，当它们进入 View 时，它会添加类.active。我不希望删除该类，因此一旦添加它，它就会保留在那里。

总体思路:

如果.default在 ScrollView 中，则添加类.active

因此，当您向下滚动时，它会在类进入 View 时添加该类。

在查看了类似的问题后，我得出了以下结论: http://jsfiddle.net/x05vwb28/

$(window).scroll(function() {
    if (checkVisible($('.default'))) {
        $('.default').addClass('active');
    } 
});

function checkVisible( elm, eval ) {
    eval = eval || "visible";
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();

    if (eval == "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
    if (eval == "above") return ((y < (vpH + st)));
}

它成功了一半...当滚动时，它会将事件类添加到所有元素，而不是仅添加到 View 中的元素。

我希望第一个 div 自动添加 active 类(因为它已经在 View 中)

老实说，尽管它确实有效……但我不明白这个功能。

有更简单的方法吗？

Answer 1

您的代码现在运行方式的问题是，通过将 $('.default') 传递给函数，这意味着您将该类应用于所有 div 如果 任何 div 可见，这不是您想要的。

您要做的就是过滤掉不在 View 中的 div，并将类附加到 View 中的 div 中。

$(window).scroll(function() {
    $('.default').filter(checkVisible).addClass('active');
    // select divs then filter them based on view 
}).scroll();

function checkVisible() {
    var elm = this;
    var eval = eval || "visible";
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();

    if (eval == "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
    // if (eval == "above") return ((y < (vpH + st))); you don't really need this
}

.default {width: 500px; height: 500px; margin: 0 0 20px 0; float: left; border: 2px solid black;}
.div1.active {background: url('http://a1.dspnimg.com/data/l/423341110329_Qy737Vid_l.jpg');}
.div2.active {background: url('http://a1.dspnimg.com/data/l/509084866423_rd0gX45i_l.jpg');}
.div3.active {background: url('http://a1.dspnimg.com/data/l/78223608549_WRxtYYPS_l.jpg');}
.div4.active {background: url('http://fc05.deviantart.net/fs71/f/2010/265/b/4/pink_and_blue_clouds_500x500_by_prodigy42-d2zaii3.jpg');}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div class="default div1"></div>
<div class="default div2"></div>
<div class="default div3"></div>
<div class="default div4"></div>