요소가 더 이상 화면에 없으면?

Question

내 웹 사이트에는 오른쪽으로 스크롤되는 떠 다니는 클라우드 (요소)가 있으며 화면에 더 이상 표시되지 않을 때를 말하고 싶습니다.

어떻게하면됩니까?

setInterval(function(){ 
    if(!jQuery('.sa_cloud_l').is(':visible')){ 
     alert('not visible anymore'); 
    }else{   
     c1.css('left', '+=21'); 
    } 
},100); 

Answer 1

:visible 선택자는 브라우저의 뷰포트 안에있는 것을 고려하지 않습니다. 그들은 문서의 공간을 사용하는 경우

http://api.jquery.com/visible-selector/

요소는 볼 간주됩니다. 보이는 요소의 너비 또는 높이가 0보다 큽니다.

가시성이있는 요소 : 숨김 또는 불투명도 : 0은 여전히 ​​레이아웃에서 공간을 사용하기 때문에 으로 볼 수 있습니다. 요소를 숨기는 애니메이션에서는 애니메이션의 끝 부분 인 까지 요소를 볼 수 있습니다. 요소를 표시 할 애니메이션에서 요소는 애니메이션 시작 부분에 표시되는 것으로 간주되는 입니다.

Answer 2

확인 jQuery 플러그인 뷰포트 http://www.appelsiini.net/projects/viewport

Answer 3

if ($(window).scrollLeft() <= $(this).offset().left 
    && $(this).offset().left < $(window).width()+$(window).scrollLeft() 
    && $(window).scrollTop() <= $(this).offset().top 
    && $(this).offset().top < $(window).height()+$(window).scrollTop()) { 
    // at least part of 'this' is within the window 
} 

Answer 4

:visible은 속성 none가 아닌 자신의 CSS 디스플레이 요소를 선택합니다. offset() 방법을 사용할 수 있습니다.

var width = $(window).width(); 

setInterval(function(){ 
     if ($('.sa_cloud_l').offset().left > width) { 
      alert('not visible anymore'); 
     } else {   
      c1.css('left', '+=21'); 
     } 
},100);