Jquery 检查元素是否进入视图，如果是，则添加类

我想堆叠元素，当它们进入视图时，它会添加class.active。我不想删除这个类，所以一旦添加了它，它就会留在那里

总体思路：

如果滚动条上显示.default，则添加类.active

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

在研究了类似的问题后，我得出了以下结论：

$（窗口）。滚动（函数（）{
如果（选中可见（$（'.default'））{
$（'.default'）.addClass（'active'）；
} 
});
功能检查可见（elm、eval）{
eval=eval | |“可见”；
var vpH=$（窗口）.height（），//视口高度
st=$（窗口）.scrollTop（），//Scroll Top
y=$（elm）.offset（）.top，
elementHeight=$（elm）.height（）；
如果（eval==“可见”）返回（（y<（vpH+st））&&（y>（st-元素高度））；
如果（eval==“高于”）返回（（y<（vpH+st））；
}

它只起了一半作用。。。滚动时，它会将活动类添加到所有元素中，而不是仅添加到视图中的元素中

我希望第一个div自动添加active类（因为它已经在视图中）

如果我是诚实的，尽管它能起作用。。。我不懂这个功能

---

有更简单的方法吗？

现在代码运行方式的问题是，通过将

$（'.default'）

传递给函数，意味着如果任何div可见，则将该类应用于所有div，这不是您想要的

您需要做的是过滤掉不在视图中的div，并将类附加到在视图中的div

$（窗口）。滚动（函数（）{
$（'.default'）.filter（checkVisible.addClass（'active'）；
//选择div，然后根据视图对其进行过滤
}).scroll（）；
函数checkVisible（）{
var elm=这个；
var eval=eval | |“可见”；
var vpH=$（窗口）.height（），//视口高度
st=$（窗口）.scrollTop（），//Scroll Top
y=$（elm）.offset（）.top，
elementHeight=$（elm）.height（）；
如果（eval==“可见”）返回（（y<（vpH+st））&&（y>（st-元素高度））；
//如果（eval==“over”）返回（（y<（vpH+st）），您实际上不需要这个
}

。默认值{宽度：500px；高度：500px；边距：0 0 20px 0；浮动：左侧；边框：2px纯黑色；}
.div1.active{背景：url（'http://a1.dspnimg.com/data/l/423341110329_Qy737Vid_l.jpg');}
.div2.active{背景：url（'http://a1.dspnimg.com/data/l/509084866423_rd0gX45i_l.jpg');}
.div3.active{背景：url（'http://a1.dspnimg.com/data/l/78223608549_WRxtYYPS_l.jpg');}
.div4.active{背景：url（'http://fc05.deviantart.net/fs71/f/2010/265/b/4/pink_and_blue_clouds_500x500_by_prodigy42-d2zaii3.jpg“）；}

---

这是否完成了您想要做的事情？这是一个非常快速和肮脏的解决方案，可能需要清理，但我让它起作用了。或者至少，我是如何理解你的问题的

$（文档）.ready（函数（）{
var vp_height=$（窗口）.height（）；
$（文档）.on（'scroll'，function（）{
滚动高度=$（文档）.scrollTop（）；
视口底部=视口高度+滚动高度；
var visible=$（'body>div'）.filter（$filter\u inview）.addClass（'active'）；
$（'body>div'）。不可见。removeClass（'active'）；
});
});
函数$filter\u inview（i，el）{
变量el=$（el）；
返回（el.offset（）.top>滚动高度和el.offset（）.top<视口底部）
}

body>div{
高度：300px；
宽度：100%；
}
主体>分区活动{
边框：1px纯红；
}

你好，1号
你好，2号
你好，3号
你好，4号
大家好，5号

谷歌“jquery isvisible”搜索的第二个链接不想显得粗鲁，但你们还没读过我的问题。伙计们，这不是关于元素是可见还是隐藏的，这是关于元素是否在窗口的视图区域。我有点困惑的是，在函数中没有任何类型的返回语句的情况下，你的编码是如何工作的。实际上有两个返回，一个从未被调用过@杰希特。

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