티스토리 뷰

스크롤 이벤트

홈페이지 화면이 스크롤이 되면서 팝업이 뜨거나 아래쪽에 네비바가 나타났다 사라지는 등 이러한 동작을 할 수 있게 하는 것이 스크롤 이벤트 입니다. 이런 이벤트는 주로 모바일앱에서 스크롤을 어느정도 시작을 했을때 화면 하단에 네비바가 나타나게 하는 그런 용도로 자주 쓰이고 있습니다.

소스코드는 아래와 같습니다.

$(window).scroll(function(){
        if($(this).scrollTop() > 200 ) {
              //이벤트
        }
})


스크롤이 됨에 따라서 높이가 조금이라도 변하면 이벤트를 발생시 킬 수 있습니다.


위의 코드를 설명하자면,


첫번째줄 $(window).scroll(function) 이벤트는 스크롤시에 사용이되는 이벤트로서 여기에 조건을 넣기만 하면 제이쿼리 스크롤 이벤트를 실행시킬 수 있습니다.

조건을 추가하는 방법의 예를 들자면, if($(this).scrollTop() > 200 )  이 조건은 현재의 스크롤 크기가 200이상일때 동작을 해라는 문구입니다. scrollTop은 화면의 제일 꼭대기의 위치를 반환합니다. 그래서 스크롤을 실행할때 위치값이 증가하기 시작합니다.

간단한 코드를 이용해 실무에서 자주 쓰이는 화면 스크롤 시 상단 헤더가 고정이 되는 기능을 쉽게 구현할 수 있습니다.


출처 및 인용 : http://storyhong.tistory.com/103




'퍼블리싱' 카테고리의 다른 글

네이버 지도 API 사용하기 2  (0) 2017.06.29
네이버 지도 API 사용하기  (0) 2017.06.28
스크롤 이벤트  (0) 2017.06.26
ajax 개념  (0) 2017.06.13
[Javascript] 함수에서 return과 break의 차이  (0) 2017.06.07
box-sizing에 대해 알아보자  (0) 2017.06.01

Recent Comments