Jquery는 스크롤 동작으로 요소가 완전히 숨겨 졌을 때 감지합니다.

Question

HTML 요소가 완전히 숨겨져있을 때를 감지해야합니다. 예를 들어 div가 문서 상단에 닿으면 많은 예제를 발견합니다. 녹색 라인, 내가 원하는 건이 녹색 라인이 croll의 움직임으로 숨겨져 있는지를 감지하는 것입니다.

편집 : 나는 감지 할 필요가 때 바로 라벨의 폐쇄 후에는 사용자의 스크롤의 움직임에 최고에 도달 할 때를 요소의 개방을 가지고 그 때, 감지 할 수있는 녹색 선 가장자리가 녹색 테두리가있는 레이블의 닫기가 맨 위에 도달 할 때가 아니라면 전체 DIV가 숨겨 질 때까지 위쪽 가장자리에 도달합니다.

$(function(){ 
 
    $(window).on('scroll', function() { 
 
     var scrollTop = $(window).scrollTop(); 
 
     var elementOffset = $('.element').offset().top; 
 
     var currentElementOffset = (elementOffset - scrollTop);  
 
     console.log(currentElementOffset); 
 
    }); 
 
});

body { 
 
    display: block; 
 
    min-height: 1250px; 
 
    border-bottom: 2px; 
 
} 
 

 
#content { 
 
    display: block; 
 
    min-height: 250px; 
 
    border-bottom: 5px solid rgb(121,185,0); 
 
    background-color: rgb(250,250,250); 
 
} 
 

 

 
#content:after { 
 
    content: ""; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
    <div class="element"></div> 
 
</div>

Answer 1

는이처럼 구현할 수 있습니다

• 이의이 + 높이 오프셋 요소가 포함에 대한 문서의 스크롤 위치를 확인합니다. [요소는 스크롤 후의 표시되는지 확인]의

$(document).ready(function() { 
 
    var scroll_pos = 0; 
 
    $(document).scroll(function() { 
 
    scroll_pos = $(this).scrollTop(); 
 
    var element1 = $('#content').offset().top + $('#content').height(); 
 
    if (scroll_pos > element1) { 
 
     alert("Passed"); 
 
    } 
 
    }); 
 
});

body { 
 
    display: block; 
 
    min-height: 1250px; 
 
    border-bottom: 2px; 
 
} 
 

 
#content { 
 
    display: block; 
 
    min-height: 250px; 
 
    border-bottom: 5px solid rgb(121, 185, 0); 
 
    background-color: rgb(250, 250, 250); 
 
} 
 

 
#content:after { 
 
    content: ""; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
    <div class="element"></div> 
 
</div>