요소가 화면에 표시되지 않는 경우 어떻게 검색 할 수 있습니까?

Question

사용자가 내 웹 사이트를 아래로 스크롤하면 맨 위의 헤더가 보이지 않을 때를 감지하고 싶습니다. 이게 jquery로 가능합니까?

Answer 1

@RoryMcCrossan에서 언급했듯이 직접 계산할 수 있습니다. 당신이 좀 더 flexibillity을 원하는 경우에

이 jQuery 플러그인을 시도 : 당신이 요소가 가시 뷰포트 내에 있는지 여부에 따라 DOM을 조회 할 수 있습니다

http://www.appelsiini.net/projects/viewport

. 예를 들어

:

$("div:in-viewport") 

은 현재 볼 수 있습니다 div의를 반환합니다.

표시 위치가 아닌 요소를 쿼리 할 수도 있습니다. 주로 :

자세한 정보 및 다운로드는 위의 링크를 참조하십시오. 당신이 상관없이 어디에, 현재 표시되지 요소
를 조회하려면이 라이브러리를 사용하려면

---

,이를 사용

$("div").not(":in-viewport") 

---

그래서, 헤더를 가정하고있다 header의 ID는 다음과 같이 사용할 수 있습니다.

var $header = $('#header'); 

$(window).scroll(function() 
{ 
    var isVisible = $header.is(':in-viewport'); 
    // Now show, hide, or do whatever you want... 
}); 

Answer 2

o 윈도우 스크롤의 위치에 대해 offset()을 사용하여 요소의 위치를 ​​확인합니다. 다음과 같은 내용 :

$(window).scroll(function() { 
    var $header = $("#header"); 
    var headerBottomPos = $header.offset().top + $header.height(); 
    if (headerBottomPos < this.scrollTop()) { 
     // header is not being displayed 
    } 
});