关于jquery：检查元素是否在视图中，如果是，则添加类

Check if element is into view and add class if so

我想堆叠元素，当它们出现在视图中时，它会添加类。active。我不希望移除类，因此一旦添加它，它就保留在那里。

总体思路：

如果.default在视图中，则滚动添加类.active

所以当您向下滚动时，它会在它进入视图时添加类。

在看了类似的问题之后，我想到了这个问题：http://jsfiddle.net/x05vwb28/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(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')传递给函数，这意味着如果有任何div是可见的，则将类应用于所有div，这不是您想要的。

您需要做的是过滤掉视图中没有的div，并将类附加到当前的div中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(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
}

1
2
3
4
5

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

号

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

这是你想做的吗？这是一个非常快速和肮脏的解决方案，可能可以站起来清理，但我得到了它的工作。或者至少，我想知道我是如何理解你的问题的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

。

1
2
3
4
5
6
7

body>div {
height: 300px;
width: 100%;
}
body>div.active {
border: 1px solid red;
}

1
2
3
4
5
6

。