检查元素是否在视图中，如果是，则添加类
我想堆叠元素，当它们进入视图时，它会添加类.active。 我不希望课堂被删除，所以一旦添加，它就停留在那里。
大概的概念：
如果.default在滚动视图中，请添加.active类
所以当你向下滚动时，它会在课程出现时加入课程。
看过类似的问题后，我想出了这个：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自动添加活动类（因为它已经在视图中）
如果我是诚实的，就像它的作品一样......我不明白这个功能。
有没有更简单的方法来做到这一点？
现在代码运行的问题是，通过将$('.default')传递给函数，这意味着如果有任何 div可见，那么您将该类应用于所有div，这不是您想要的。
你必须做的是过滤掉不在视图中的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>这是否做你想做的事？ 这是一个非常快速和肮脏的解决方案，可能会被清理干净，但我得到它的工作。 或者至少，我明白了你的问题。
$(document).ready(function() {
var vp_height = $(window).height();
$(document).on('scroll', function() {
scroll_height = $(document).scrollTop();
viewport_bottom = vp_height + scroll_height;
var visible = $('body>div').filter($filter_inview).addClass('active');
$('body>div').not(visible).removeClass('active');
});
});
function $filter_inview(i, el) {
var el = $(el);
return (el.offset().top > scroll_height && el.offset().top < viewport_bottom)
} body>div {
height: 300px;
width: 100%;
}
body>div.active {
border: 1px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Hello There, Number 1</div>
<div>Hello There, Number 2</div>
<div>Hello There, Number 3</div>
<div>Hello There, Number 4</div>
<div>Hello There, Number 5</div>