[js/jquery] div 화면에 나왔는지 확인하는 함수

다른 lib 를 사용해서도 충분히 구현가능하다만, 

그냥 필요에 의해서 한번 만들어본 코드 

일단 필요할 것이라 판단되는 상황은 아래와 같다. 


스크롤을 하다, 특정 영역에 도달했을 때 뭔가 동작이 일어나야함
상단 네비게이션에 특정 영역에 메뉴 On 시킬 때 
css animation을 실행시키는 시점(?) 이건 개인적인 걸로,,


암튼 등등의 경우에 사용된다. 


공식은 이러하다.

#1 현재 위치 값을 알아낸다. 
   - 현재 위치를 알아야, 특정 DIV의 위치와 비교를 할 수 있다.  

#2 특정 DIV 위치를 알아야한다. 
   - #1과 같은 맥락이네.. 

암튼 함수는 이러하다

		function setVisible(a){
			if( a.length > 0 ){
				var stdPos = $(window).scrollTop() + $(window).height() - ($(window).height() / 3);
				if( stdPos >  a.offset().top ){
					a.addClass('on');
				}
			}
		}
 

setVisible는 함수명이다. 자유롭게 변경가능하다. 

(a) 는 div 엘레멘트이다. 

재사용을 위해 ( div 만 지정해서, 반복해서 사용가능하기 때문에 )

if( a.length > 0 ){

이 부분은 내가 선택한 div 가 화면에 있을 경우에만 실행시키기 위해 넣은 것이다. 

$(window).scrollTop() + $(window).height() - ($(window).height() / 3);

$(window).scrollTop() : 현재 윈도우의 스크롤 값 ( 0에서 부터 시작하고, 한번 스크롤 할때마다 100씩 증가한다. )
$(window).height() : 현재 윈도창의 높이 현재 창의 높이를 알아야 현재 위치를 알 수 있다. 
($(window).height() / 3) : 이건 div 가 창의 3분의 1 지점에 보일 때 체크하기 위함 ( 필요없다면 역시 삭제 )

이제부터 비교하는 영역 
if( stdPos >  a.offset().top ){

a.offset().top : div 의 위치 값. 화면에서 document 크기를 기준으로, 콘텐츠 시작점 위치 값을 준다. 

이제 현재 위치와 div의 위치를 비교해서 현재 위치가 div 위치보다 클 경우 즉 스크롤이 div 를 지나쳤다고 판단되면,

필요한 기능을 추가하여 사용한다.

나의 경우는 'on' class 를 추가시켰다.