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

Question

我有一个单页(滚动)html。我的 div(home 和 home2)看起来像下面的代码。两者的高度均为 100%。我想使用 jQuery 将一些 CSS 应用于第二个 div(home2)，仅当它在浏览器中对用户可见时。请建议我这样做的方法。

<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>

我不知道如何正确使用 $(window).scrollTop() 是否可以解决我的问题。

Answer 1

也许你应该使用 mousein 和 mouseleave，我认为因为你的 div 中有很多内容 focusin 和 focusout 很难获得焦点，你也可以添加一些可见的检查或者你想做什么

http://jsfiddle.net/mmue2hcd/

HTML

<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>

Javascript/Jquery

$(document).ready(function () {

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

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


});

CSS .cssfocused { 背景色:红色；