뷰포트 위쪽 가장자리를 터치하는 요소를 효율적으로 선택하는 방법

Question

페이지가 스크롤 될 때 브라우저 창 뷰포트의 위쪽 가장자리를 터치하는 요소를 선택하는 데 계산 효율이 좋은 방법은 무엇입니까?

첨부 된 이미지를 참조하십시오. 녹색 요소는 위쪽 모서리에 닿아 있기 때문에 선택됩니다.

UPDATE

이 오프 스크린가는 요소를 퇴색하는 것입니다 내가 사용하는 것입니다 방법의 예. 페이지에 수 백 개가있을 수 있습니다. Pinterest와 같은 페이지를 상상해보십시오. throttled가 여전히 비효율적이라고 느낄지라도 스크롤 이벤트의 속도로 수백 가지의 오프셋 및 스크롤 가기를 계산합니다.

Answer 1

이것은 내가 생각해 낸 것입니다. 나는 scrollTop 값을 캐싱함으로써 개선 될 수 있다고 생각하지만, 이것은 꽤 좋다. 박스 텀을 캐싱하기위한 프레임 워크를 포함했지만 구현 코드는 포함하지 않았습니다. div 만 숨기려면 스크롤을 구현해야합니다. 나는 너를 운동으로 상향 스크롤에 reshowing 그들을 떠났다.

창이 스크롤되면 마지막으로 숨겨진 div가 표시됩니다. 이 div 앞에 숨겨져있는 모든 것을 이미 알고 있습니다. 그런 다음 '다음 요소가 화면을 벗어나는 동안'을 사용하여 숨 깁니다. div가 화면에서 벗어나 자마자 우리는 중단합니다. 따라서 전체 목록을 반복하여 시간을 절약 할 수 있습니다.

http://jsfiddle.net/kkv3h/2/

//track whether user has scrolled up or down 
var prevScrollTop = $(document).scrollTop(); 

$(document).scroll(function() { 
    var currentScrollTop = $(this).scrollTop(); 
    if (currentScrollTop > prevScrollTop) { 
     //down 
     var lasthiddenbox = $('.fadeboxhidden:last'); 
     var nextbox = (lasthiddenbox.length > 0) ? lasthiddenbox.next('.fadebox') : $('.fadebox:first'); 
     while (nextbox.length) { 
      console.log('box: ' + nextbox.offset().top + ' scroll: ' + currentScrollTop); 
      if (nextbox.offset().top < currentScrollTop) { 
       nextbox.animate({ opacity: 0 }, 3000).addClass('fadeboxhidden'); 
      } 
      else { return; } 
      nextbox = nextbox.next('.fadebox:first'); 
     }   
    } else { 
     //up   
    } 
    prevScrollTop = currentScrollTop ; 
}); 

//create an object to hold a list of box top locations 
var boxtops = new Object; 


//gather all boxes and store their top location 
$('.fadebox').each(function(index) {  
    //you may want to dynamically generate div ids here based on index. I didn't do this 
    //because i was already using the id for positioning. 
    var divid = $(this).prop('id'); 
    boxtops[divid] = $(this).offset().top; 
    //console.log(boxtops[divid]);  
}); 

Answer 2

히트 테스트를 결정할 요소를 "히트 테스트 가시적"이라고 표시하는 것이 가장 좋은 방법이라고 생각합니다. 그런 다음 스크롤 이벤트에서 해당 요소에 대해 문서와 비교하여 오프셋을 찾을 수 있어야합니다 (jQuery offset 참조). 오프셋 값이 스크롤보다 작 으면 스크롤 값을 기준으로하고 오프셋 + 요소 높이 스크롤 오프셋보다 크면 요소가 위쪽 가장자리를 "터치"해야합니다.