jQuery를 사용하여 특정 요소를 볼 때마다 어떻게해야합니까?

Question

지금 때마다 사용자가이 코드를 사용하여 URL 해시를 업데이트 내 페이지의 하단에 도달 :

var new_page_value = 1; 
$(window).scroll(function() { 
    if($(window).scrollTop() == $(document).height() - $(window).height()) { 
     new_page_value += 1; 
     window.location.hash = 'page-' + new_page_value; 
    } 
}); 

나는 동일한 기능을 수행 할 수있는 방법을 클래스로 된 div의 과거 사용자가 스크롤 "페이지 "아래 코드에서? 예를 들어 사용자가 첫 번째보기로 스크롤하면 해시는 # page-1로 업데이트해야하지만 두 번째보기로 스크롤하면 해시는 # page-2로 업데이트되어야합니다. 그리고 처음으로 다시 스크롤하면 해시는 다시 # page-1로 업데이트됩니다. 기본적으로 해시는 div에있는 뷰를 기반으로 업데이트해야합니다.

<div class="page" data-page-num="1"></div> 

<br /><br /><br /><br /><br /><br /><br /><br /><br /> 

<div class="page" data-page-num="2"></div> 

<br /><br /><br /><br /><br /><br /><br /><br /><br /> 

<div class="page" data-page-num="3"></div> 

Answer 1

이 코드가 도움이 될 수 있지만 클라이언트 측에서 약간 집중적 일 수 있습니다.

var new_page_value = 1; 
$(window).scroll(function() { 
    $(".page").each(function() { 
     var position = $(this).position(); 
     if($(window).scrollTop() == position.top) { 
      new_page_value += 1; 
      window.location.hash = 'page-' + new_page_value; 
     } 
    }); 

    if($(window).scrollTop() == $(document).height() - $(window).height()) { 
     new_page_value += 1; 
     window.location.hash = 'page-' + new_page_value; 
    } 
});