팀교육 : floating banner

Style

#content_a {width:800px; height:1200px; padding:10px; margin:0 auto; border:5px solid #333}

#quick {position:absolute; top:100px; left:50%; margin-left:425px; width:180px; padding:10px; text-align:center; height:100px; background:#000; color:#fff; font-weight:bold}

Javascript

jQuery(function($){

var quickBox = $("#quick");

var quickTop = parseInt(quickBox.offset().top); //퀵메뉴 top 포지션을 변수로 저장

//alert(quickTop);

$(window).scroll(function(){ //스크롤 발생시 펑션 실행

var scTop = Math.max(document.documentElement.scrollTop,document.body.scrollTop); //스크롤 값 가져와 변수로 저장

quickBox.stop(); //기존 퀵메뉴 움직임을 멈추고

quickBox.animate({"top":scTop + quickTop},600); //퀵메뉴를 기본 top 포지션값+스크롤된 값 만큼 애니메이션 시킨다

});

}); 

html

<div id="content_a">

컨텐츠 영역

</div> 

<div id="quick">

퀵메뉴

</div>