我想堆叠元素，当它们进入视图时，它会添加类.active。我不想删除该类，因此一旦添加它，它就会保留在那里。
大概的概念：
If .default在滚动视图中添加类.active
因此，当您向下滚动时，它会在类进入视图时添加该类。
在查看了类似的问题后，我得出了以下结论：http://jsfiddle.net/x05vwb28/ 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)));
}
它工作了一半...当滚动时，它将活动类添加到所有元素而不是只针对眼前的人。
我希望第一个 div 自动添加 active 类（因为它已经在视图中）
老实说，尽管它确实有效……但我不明白这个功能。
有没有更简单的方法来做到这一点？
您的代码现在运行方式的问题是通过传递$('.default')对于该函数，这意味着您正在将该类应用于all divs if anydiv 的一部分是可见的，这不是您想要的。
您要做的就是过滤掉不在视图中的 div，并将类附加到视图中的 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
