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

업데이트 되었습니다
2009/09/21 - [웹 프로그래밍/JavaScript] - [jquery] 스크롤 따라 다니는 레이어 배너 or 메뉴  (중앙정렬용) #2



이 배너는 브라우저의 스크롤을 움직이면 따라다니는 배너입니다.중앙정렬에 특히 쓰기 좋습니다. 그래서 만든거니까요

이 기능을 구현한 스크립트는 매우 많습니다. 멋진 기능을 제공하는 것들 도 많고요, 사실 저는 CSS로 구현된 것을 좋아 합니다. 좌측 정렬이라면 자바스크립트를 쓸 필요도 없습니다. 너무 부드러워서(?)모니터에 포스트잇 붙여 놓은 듯 한게 디자이너 분들에게는 좀 꺼려 지나보더군요. 한가지 더하자면 CSS에 IE6 때문에 expression을 사용해야 하는 문제가 있기도 했습니다. CPU를 비교적 많이 잡아먹거든요..

좌측정렬의 경우에는  많은 종류의 스크립트가 있습니다만, 중앙정렬용으로는 얼마되지 않고 그나마 있던것들도 쓸데없이 브라우저 검사를 한다거나..  heartBeat() 함수를 많이들  쓰시는데 -저도 그랬습니다.- 어딘가 모르게... 라기보다는 jQuery롤 만들어 보고 싶어서 였습니다.

다른경우는 너무 껄떡대는게 부드럽지 못해 외관상 좋지 못했습니다.

이런 계기로 주말에 할 일도 없고 해서 아래 스크립트를 만들어 봤습니다. 간단한 기능에 다소 길다 싶지만 IE6~IE8, 파이어 폭스, 크롬, 사파리, 오페라 모두 잘 동작합니다.
사용시 전제 조건으로 최신의 jQuery를 사용해야합니다. 사용자의 컴퓨터 사양에 따라 느려질 수 있습니다만 요즘 어지간한 컴퓨터 사양이면  느끼지도 못할 것 같습니다..
$(document).ready(function(){ var $doc = $(document); var position = 0; var top = $doc.scrollTop(); //현재 스크롤바 위치 var screenSize = 0; // 화면크기 var halfScreenSize = 0; // 화면의 반 /*사용자 설정 값 시작*/ var pageWidth = 1000; // 페이지 폭, 단위:px var leftOffet = 409; // 중앙에서의 폭(왼쪽 -, 오른쪽 +), 단위:px var leftMargin = 909; // 페이지 폭보다 화면이 작을때 옵셋, 단위:px, leftOffet과 pageWidth의 반만큼 차이가 난다. var speed = 1500; // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec) var easing = 'swing'; // 따라다니는 방법 기본 두가지 linear, swing var $layer = $('#floating'); // 레이어 셀렉팅 var layerTopOffset = 188; // 레이어 높이 상한선, 단위:px $layer.css('z-index', 10); // 레이어 z-인덱스 /*사용자 설정 값 끝*/ //좌우 값을 설정하기 위한 함수 function resetXPosition() { $screenSize = $('body').width();// 화면크기 halfScreenSize = $screenSize/2;// 화면의 반 xPosition = halfScreenSize + leftOffet; if ($screenSize < pageWidth) xPosition = leftMargin; $layer.css('left', xPosition); } // 스크롤 바를 내린 상태에서 리프레시 했을 경우를 위해 if (top > 0 ) $doc.scrollTop(layerTopOffset+top); else $doc.scrollTop(0); // 최초 레이어가 있을 자리 세팅 $layer.css('top',layerTopOffset); resetXPosition(); //윈도우 크기 변경 이벤트가 발생하면 $(window).resize(resetXPosition); //스크롤이벤트가 발생하면 $(window).scroll(function(){ yPosition = $doc.scrollTop()+layerTopOffset; $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false}); }); }); //레이어 HTML 마크업은 아주 간단하게. ID만 주는정도로 끝..(position:absolute는 줘야 합니다..) <div id="floating" style="position:absolute;" > 레이어 내용 </div>

중앙정렬 때문에 넣은 코드 부분을  다시 만들고 싶지만 잘 동작 하는 관계로 그냥 둡니다만, 능력자분들께서는 알아서 고쳐 쓰시기 바랍니다.

어떤 용도로도 자유로운 사용가능. 수정/배포도 마음대로..
** 참고로 레이어로 돌릴 엘리먼트에 동작을 위해 따로 스타일을 줄 필요 없습니다.

08.20 // 변수등 소소한것들 수정.. 처음과 기능상 다른점 없음