[jquery] 스크롤 따라 다니는 레이어 배너 or 메뉴 (중앙정렬용) #3

업데이트 되었습니다.

2009/10/17 - [웹 프로그래밍/JavaScript] - 스크롤 팔로워 v0.1 

레이어를 좌측으로 할 경우 문제가 발생해서 약간 수정 했습니다.
pageWidth는 필수입력입니다.

pageWidth : 페이지의 전체 넓이
type : 레이어의 위치 (left 또는 right-기본값)
topMargin : 상단마진
minTop : 최소 상단마진(상단마진과 값이 같으면 항상 같은 높이 유지)
margin : 좌우의 마진 (+ 또는 - 값으로 미세 조정 가능)
speed : 속도
easing : 따라다니는 방법 (swing 또는 linear- 기본값)
zindex : zindex 깊이

$(document).ready(function(){ var $doc = $(document); var $win = $(window); var $body = $('body'); var position = 0; var top = $doc.scrollTop(); var screenSize = 0; var halfScreenSize = 0; var $layer = $('#floating'); var tValues = $layer.attr('values'); $layer.css("position","absolute"); //기본값 var type = 'left'; var margin = '0'; var speed = '1000'; var easing = 'linear'; var topMargin = '0'; var minTop = '0'; $layer.css('z-index', '10'); //값이 있는 경우에만 if (tValues) { //json값으로 바꾸고 setValues = eval("("+tValues+")"); //값이 있는 경우에만 값을 가져옴 if (setValues.pageWidth) var offset = parseInt(setValues.pageWidth)/2; else { alert('pageWidth값은 필수입니다.'); return false; } margin = (setValues.margin)? parseInt(setValues.margin):'0'; speed = (setValues.speed)? parseInt(setValues.speed):'1000'; easing = (setValues.easing)? setValues.easing:'linear'; topMargin = (setValues.topMargin)? parseInt(setValues.topMargin):'0'; minTop = (setValues.minTop)? parseInt(setValues.minTop):'0'; $layer.css('z-index', (setValues.zindex)? setValues.zindex:'10'); marginResult = offset + margin; //좌측인 경우 if (setValues.type == 'left') type = 'right'; } //좌우 위치값 정해주는 함수 function resetXPosition() { $screenSize = $body.width(); halfScreenSize = $screenSize/2; xPosition = halfScreenSize + marginResult; $layer.css(type, xPosition); } //최초 좌우 및 상단위치 resetXPosition(); $layer.css('top',topMargin); //윈도우 크기가 바뀌면 $win.resize(resetXPosition); //스코롤하면 $win.scroll(function(){ //스크롤 상태에서 상단과의 거리 top = $doc.scrollTop(); if (top > topMargin+minTop) yPosition = top + minTop; else yPosition = top + topMargin; //따라다니기 적용 $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false}); }); }); <div id="floating" values="{'pageWidth':'1000','type':'right','topMargin':'100','minTop':'200',<br />'margin':'20','speed':'500','easing':'swing','zindex':'10'}"> <br /> 내용 <br/> </div>