제이쿼리를 공부하던 중에 스크롤이 되면서 팝업이 뜨거나 아래쪽에 네비바가 나타났다 사라지는 등 이러한 동작을 할 수 있게 하는 것이 스크롤 이벤트 입니다. 이런 이벤트는 주로 모바일앱에서 스크롤을 어느정도 시작을 했을때 화면 하단에 네비바가 나타나게 하는 그런 용도로 자주 쓰이고 있습니다.
소스코드는 아래와 같습니다.
$(window).scroll(function(){
if($(this).scrollTop() > 200 ) {
//이벤트
}
})
이렇게 스크롤이 됨에 따라서 높이가 조금이라도 변하면 이벤트를 발생시 킬 수 있습니다
자, 그럼 소스에 대해서 간략한 설명을 드리겠습니다. 첫번째줄 $(window).scroll(function) 이벤트는 스크롤시에 사용이되는 이벤트로서 여기에 조건을 넣기만 하면 제이쿼리 스크롤 이벤트를 실행시킬 수 있습니다.
그래서 조건을 넣었는데요. if($(this).scrollTop() > 200 ) 이 조건은 현재의 스크롤 크기가 200이상일때 동작을 해라는 문구입니다. scrollTop은 화면의 제일 꼭대기의 위치를 반환합니다. 그래서 스크롤을 실행할때 위치값이 증가하기 시작합니다.
오늘은 간단하게 제이쿼리 스크롤 이벤트 제어에 대해서 알아보도록 하였습니다. 다음에는 살을 좀 붙여서 좀더 세부적인 내용을 다루어 보도록 하겠습니다.
