스크롤 시, 숨겨진 객체가 등장하는 기능!
스크롤만 하면 뿅 등장하는게 재밌죠
(문과 감수성)
기능 소개에 앞서
살짝 헷갈릴 수 있으니 설명을 좀 달게요
스크롤 시 객체가 등장하는 기능은
일정 높이를 지났을 때, 숨겨진 객체를 등장시키는 개념이에요
그래서 처음 *^^* 가 적힌 객체의 높이를 먼저 구한 후,
윈도우 스크롤이 그 높이를 지났을 때 숨겨진 객체가 등장하는 거랍니다.
대표적으로 사용하는 기능입니다!
$(객체).height();
객체의 높이를 재줍니다.
$(window).scroll(function(){});
윈도우 스크롤 시 발생되는 기능 문법입니다.
$(this).scrollTop();
윈도우 스크롤 상단 수치라고 생각하시면 됩니다.
(스크롤이 시작되는 지점은 0부터 시작합니다.)
작동원리
- 스크롤의 위치가 화면 아래일수록 scrollTop 의 값이 커짐
- scrollTop 은 윈도우에서 스크롤의 위치가 가장 상위에 있다는 의미로 해석 (프레임 안에서 종이가 위 아래로 움직인다고 생각하시면 편해요.)
- 윈도우 스크롤의 값이(scrollTop 의 값) navHeight 의 높이와 같거나 크면 이벤트 작동
끝
앗, 잠시만요!
블로그에 쓴 글들은 제가 코딩을 공부하면서 배우고 느낀점들을 정리한것입니다. ^^
객관적인 글은 아니라는 점 알아주세요 :)
진짜 끝
'웹 퍼블리셔 기록 > jQuery' 카테고리의 다른 글
팝업 안의 slick slider 가 뜨지 않을 때? (2) | 2020.04.22 |
---|---|
휴대폰 번호 입력 형식 - replace() 와 substring (0) | 2020.03.31 |
선택한 색상으로 색 변하게 만드는 법(onclick, for, switch) (0) | 2019.09.08 |
클릭할 때마다 객체 추가하는 법(append, prepend) (0) | 2019.08.24 |
checkbox 클릭시 버튼 활성화하는 법 (1) | 2019.08.03 |