使用jQuery将CSS应用于div，仅当它出现在屏幕上时

我有一个单页（滚动）html。我的div（home和home2）看起来像下面的代码。两者都有100%的高度。我想使用jQuery对第二个div（home2）应用一些CSS，只有当用户在浏览器中可以看到它时。请给我一个建议

<div class="col-md-12 home" id="home">
    <div class="col-md-6 col-md-offset-3 menu2">
        <h1 class="home2head">Heading 1</h1>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>
<div class="col-md-12 home2" id="home2">
    <div class="col-md-6 menu2" id="menu2">
        <h1 class="home2head">Heading 1</h1>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>

标题1
一些内容将放在这里。关于酒店及其特色菜的一些信息

一些内容将放在这里。关于酒店及其特色菜的一些信息

一些内容将放在这里。关于酒店及其特色菜的一些信息

一些内容将放在这里。关于酒店及其特色菜的一些信息

一些内容将放在这里。关于酒店及其特色菜的一些信息

一些内容将放在这里。关于酒店及其特色菜的一些信息

一些内容将放在这里。关于酒店及其特色菜的一些信息

标题1
一些内容将放在这里。关于酒店及其特色菜的一些信息

一些内容将放在这里。关于酒店及其特色菜的一些信息

一些内容将放在这里。关于酒店及其特色菜的一些信息

一些内容将放在这里。关于酒店及其特色菜的一些信息

一些内容将放在这里。关于酒店及其特色菜的一些信息

一些内容将放在这里。关于酒店及其特色菜的一些信息

一些内容将放在这里。关于酒店及其特色菜的一些信息

---

我不知道如何正确使用$（window）.scrollTop（），如果它是我问题的解决方案。可以这样做：

$(document).on('scroll', function() {
    var $element = $(".elementClass");
    if (isScrolledIntoView($element))
        $element.addClass('someclass');
    else
        $element.removeClass('someclass');
})

然后检查其在窗口上的位置，如本文所述：

例如：

---

也许你应该使用mousein和mouseleave，我认为因为在你的div中有很多内容focusin和focusout有一个难以对焦的区域，你也可以添加一些可见的检查或者你想做的事情

Html

CSS .CSS聚焦{ 背景色：红色；

---

}

我回答了一个类似的问题，在用户在屏幕上通过div之后显示div。可以应用于为你做这项工作——你可以查看这个小插件：“当它有焦点时”和“当它在浏览器中可见时”。这是两个非常不同的东西。焦点通常意味着选择或激活等行为。但对于可见性来说，情况并非如此。为了澄清任何困惑，您想将CSS用于哪一个？“当它在浏览器中可见时”@War10ck。。我应该修改这个问题吗？检查我为你做的演示。确保右下角的窗口大小已调整到距页面内容约一行，即（使窗口变小，直到看到距底部约一行），然后滚动。您将看到第1页滚动屏幕，第2页变为蓝色。如果需要，您可以删除（+300），并将窗口放大一点，看看会发生什么。-好主意，但有个问题。。只有当鼠标位于div.上时，mouseenter函数才起作用。。如果用户使用navs滚动到div，该功能将不起作用。。

<div class="col-md-12 home" id="home">
    <div class="col-md-6 col-md-offset-3 menu2">
         <h1 class="home2head">Heading 1</h1>

        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>
<div class="col-md-12 home2" id="home2">
    <div class="col-md-6 menu2" id="menu2">
         <h1 class="home2head">Heading 1</h1>

        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>

$(document).ready(function () {

    $('#home2').mouseenter(function () {
        $(this).addClass('cssfocused');
    })

    $('#home2').mouseleave(function () {
        $(this).removeClass('cssfocused');
    });


});