스크롤 이벤트 활용

모바일 페이지를 구축하다보면 스크롤 다운하여 다음 페이지의 내용을 불러오는 기능을 추가해야할 경우가 많다.

기본적으로 아래와 같은 코드를 활용하여 준비할 수 있다.

// 스크롤 이벤트

$(window).scroll(function(e){

d_top = $(document).height(); // document height

w_top = $(window).height(); // window height

delta = d_top - w_top;

n_top = $(document).scrollTop(); // document top

console.log("delta : " + delta);

console.log("delta - n_top : " + (delta-n_top) );

if ((delta - n_top) < 1) console.error('아래쪽 왔음 다음 페이지 고고');

});

스크롤 이벤트를 바인딩하여 전체 도큐멘트의 크기와 브라우저의 크기를 파악하여 그 차이값에 따라 액션을 취할 수 있다.

이를 응용하면 가장 하단에 오브젝트를 이동시키거나 특정 위치에 고정시키는 기능도 적용할 수 있겠다.

여기에 에니메이션을 적용하면 보통 볼 수 있는 플로팅 툴바가 되는 것이다.

box_height = $("#bottomPosition").height();

//$("#bottomPosition").css( { top : n_top+w_height-box_height-18 } );

$("#bottomPosition").stop().animate({"top" : n_top+w_height-box_height-18 + "px"},1000);

#bottomPosition {

position:absolute;

left: 37px;

top: 274px;

border: 1 solid #000033;

background-color: #003333;

height: 20px;

width: 320px;

}

Fault Note