[scrollTop] 스크롤을 내리면 숨겨져있던 객체 등장!

 

스크롤 시, 숨겨진 객체가 등장하는 기능!

 

스크롤만 하면 뿅 등장하는게 재밌죠
(문과 감수성)

 

 

스크롤 시 숨겨진 객체 등장!

 

 

 

기능 소개에 앞서

 살짝 헷갈릴 수 있으니 설명을 좀 달게요

 

 

 

스크롤 시 객체가 등장하는 기능은

일정 높이를 지났을 때, 숨겨진 객체를 등장시키는 개념이에요

 

그래서 처음 *^^* 가 적힌 객체의 높이를 먼저 구한 후,

윈도우 스크롤이 그 높이를 지났을 때 숨겨진 객체가 등장하는 거랍니다.

 

 

 

대표적으로 사용하는 기능입니다!

 

$(객체).height();

객체의 높이를 재줍니다. 

 

$(window).scroll(function(){});

윈도우 스크롤 시 발생되는 기능 문법입니다.

 

$(this).scrollTop();

윈도우 스크롤 상단 수치라고 생각하시면 됩니다.

(스크롤이 시작되는 지점은 0부터 시작합니다.)

 

 

 

작동원리

• 스크롤의 위치가 화면 아래일수록 scrollTop 의 값이 커짐
• scrollTop 은 윈도우에서 스크롤의 위치가 가장 상위에 있다는 의미로 해석 (프레임 안에서 종이가 위 아래로 움직인다고 생각하시면 편해요.)
• 윈도우 스크롤의 값이(scrollTop 의 값) navHeight 의 높이와 같거나 크면 이벤트 작동

 

 

끝

 

앗, 잠시만요!

 

블로그에 쓴 글들은 제가 코딩을 공부하면서 배우고 느낀점들을 정리한것입니다. ^^

객관적인 글은 아니라는 점 알아주세요 :)

 

진짜 끝