Apply CSS to a div using jQuery, only when it appears in the screen

Question

I have a single page (scrolling) html. My divs( home and home2 ) looks like the code below. Both having height 100% each. I want to apply some CSS to the second div(home2) using jQuery, only when it is visible to the user in the browser. Please suggest me a way to do so.

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

I don't know how to use the $(window).scrollTop() properly, if it is a solution to my problem.

Answer 1

Maybe you should use mousein and mouseleave, i think that because have many contents inside your div the focusin and focusout have an difficult area to get focus, you can too add some checks as is visible or what you want to do

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 { background-color: red; }

Answer 2

could do something like this:

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

then check its position on the window, as described in this post: https://stackoverflow.com/a/488073/2414886

example: http://jsfiddle.net/dmv1cty5/3/