scroll, 화면에서 특정 영역이 완전히 노출되었는지 체크

특정 위치가 화면에 완전히 노출되었는지.. 요즘 SNS 와 FB 의 열풍으로 이런 이벤트를 적용하는 사이트들이 많아지네요..

아래 링크는 inspiredjw.tistory.com 에서 가져왔습니다. 그런데, 숫자 방식이 아니라서 URL 이 너무 길어지네요. 그래서 ShortenURL 처리.

http://vo.to/eev

Ojbect 를 변수에 담는 것이 습관이 되어서 $(window) 와 $(document) 도 변수에 담아 보았습니다.

마이너스 연산이 플러스 연산 보다 속도가 빠르다고 하는데, 루프에 사용되는 것도 아니고..

속도 보다는 보는 이에게 보다 안정감을 주는 방식으로 표시했습니다. 이해하기 쉬운 코드가 나중에 유지보수도 편하지요.

$(window).scroll(function(){

  var $o1 = $(window);

  var $o2 = $(document);

  if($o2.height() == $o1.height() + $o1.scrollTop()){ // - 연산이 더 빠르다는데.. document 와 window 를 구분하는 것이 이해하기 더 쉬울 수도

    alert('End of Window');

  }

});

그런데, 이렇게 하면 이벤트가 1회만 불려지는 것이 아니네요. 2~3번 정도 불려져요.