[JQUERY] JQUERY 검사 요소가 뷰포트에 표시되면 [중복]

JQUERY 검사 요소가 뷰포트에 표시되면 [중복]

해결법

1. ---

   1.글쎄, 당신은 어떻게 그것을 작업 만들려고 했는가? 이 플러그인에 대한 문서에 따르면,) (.visible는 요소가 표시 어떤가를 나타내는 boolean를 돌려줍니다. 이처럼 사용하는 거라고 그래서 :

   글쎄, 당신은 어떻게 그것을 작업 만들려고 했는가? 이 플러그인에 대한 문서에 따르면,) (.visible는 요소가 표시 어떤가를 나타내는 boolean를 돌려줍니다. 이처럼 사용하는 거라고 그래서 :

   if ($('#element').visible(true)) {
       // The element is visible, do something
   } else {
       // The element is NOT visible, do something else
   }
   

2. ---

   2.요소가 jQuery를 사용하여 뷰포트에서 볼 수 있는지 확인 :

   요소가 jQuery를 사용하여 뷰포트에서 볼 수 있는지 확인 :

   먼저, 상부 및 바닥 부재의 위치를 ​​결정한다. 그런 다음 뷰포트의 높이로 스크롤 위치를 추가하여 (페이지의 상단을 기준으로) 뷰포트의 하단의 위치를 ​​결정한다.

   뷰포트의 저부 위치는 소자의 상단 위치보다 크고 뷰포트의 상단 위치가 적은 요소의 저부 위치보다 경우, 소자는 (적어도 부분적으로) 뷰포트이다. 요소의 일부가 상단과 뷰포트의 아래쪽 경계 사이에있을 때 간단 측면에서, 요소가 화면에 볼 수 있습니다.

   위의 조건이 충족 될 때 if 문은 실행 어디 지금 당신은,는 IF / else 문을 작성할 수 있습니다.

   위에 설명 된 것을 실행하는 아래의 코드 :

   // this function runs every time you are scrolling
   
   $(window).scroll(function() {
       var top_of_element = $("#element").offset().top;
       var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
       var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
       var top_of_screen = $(window).scrollTop();
   
       if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
           // the element is visible, do something
       } else {
           // the element is not visible, do something else
       }
   });
   

   이 대답은 크리스 기업소와 앤디 아래에 논의 된 것을 요약 한 것입니다. 나는 내가했던 것처럼 연구를하고있는 동안이 질문을 통해 오는 다른 사람을 도움이되기를 바랍니다. 나는 또한 내 대답을 공식화하기 위해 다음과 같은 질문에 대한 답을 사용 : 쇼 사업부 때 스크롤 위치를.

3. ---

   3.당신은 요소가 뷰포트에있는 경우이 같은 jQuery를 기능을 결정하는 데 쓸 수 있습니다.

   당신은 요소가 뷰포트에있는 경우이 같은 jQuery를 기능을 결정하는 데 쓸 수 있습니다.

   jQuery를 포함 후에이 곳을 포함합니다 :

   $.fn.isInViewport = function() {
       var elementTop = $(this).offset().top;
       var elementBottom = elementTop + $(this).outerHeight();
   
       var viewportTop = $(window).scrollTop();
       var viewportBottom = viewportTop + $(window).height();
   
       return elementBottom > viewportTop && elementTop < viewportBottom;
   };
   

   샘플 사용 :

   $(window).on('resize scroll', function() {
       if ($('#Something').isInViewport()) {
           // do something
       } else {
           // do something else
       }
   });
   

   요소가 뷰포트 외부 수평 인 경우에만이 체크 위쪽 및 아래쪽 위치의 요소는,이 확인되지 않는다.

4. ---

   4.이 예제를 볼 수 있습니다.

   이 예제를 볼 수 있습니다.

   // Is this element visible onscreen?
   var visible = $(#element).visible( detectPartial );
   

   detectPartial :

   표시 소자는 표시인지 아닌지를 나타내는 부울 변수이다.

5. ---

   5.

   var visible = $(".media").visible();
   

from https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport by cc-by-sa and MIT license