화면에 나타나는 경우에만 jQuery를 사용하여 div에 CSS를 적용하십시오.

Question

단일 페이지 (스크롤링) html이 있습니다. 내 div (집 및 집 2)는 아래 코드와 같습니다. 둘 다 높이가 각각 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> 

내가 제대로()는 $ (창)을 사용하는 방법을 .scrollTop을 모른다.

Answer 1

은 다음과 같이 뭔가를 할 수 : https://stackoverflow.com/a/488073/2414886이

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

Answer 2

은 어쩌면 당신은 mousein 사용해야이 게시물에 설명 된대로

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

는 창에 자신의 위치를 ​​확인 및 mouseleave, 나는 당신의 div 안쪽에 많은 내용이 있기 때문에 focusin 및 focusout에는 어려운 지역이 있고, 당신은 visibl 인 것처럼 몇몇 수표를 너무 추가 할다는 것을 생각한다 e 또는 당신이

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> 

자바 스크립트/JQuery와 .cssfocused

$(document).ready(function() { 

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

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


}); 

CSS { 배경 색상 : 빨강; }