[jquery] 스크롤 팔로워 v0.1 - 스크롤 따라 다니는 레이어 배너 or 메뉴

버그 픽스버전이 포스팅 되었습니다
2009/12/24 - [웹 프로그래밍/JavaScript] - [jquery] 스크롤 팔로워 v0.1a - 스크롤 따라 다니는 레이어 배너 or 메뉴

이전 버전을 jquery 플러그인 형식으로 바꾸었습니다.
사용 방법 및 예제는 압축 파일에 있으므로 다운로드 받아 확인 하시기 바랍니다.

• 컨텐츠블럭이 좌측 또는 중앙정렬일 경우 사용(우측 정렬을 사용하는 싸이트는 본적이 없어서..)
• 상하좌우 픽셀단위 위치값 설정 가능
• 따라다니는 속도 설정가능
• animation easing 옵션 사용가능
• z-index 설정 가능

테스트된 브라우저는 다음과 같습니다.
Chrome 3.0.195.27
Firefox 3.5.3
Safari 4.0.3 (531.9.1)
Opera 10 (1750)
IE6, IE7, IE8 (각 최종 및 최신-작성일 기준)

테스트된 마크업은
html 4.01
xhtml 1.0

테스트된 DTD는
strict
transitional


/***********************/ /* fireskill@gmail.com */ /* http://blog.bits.kr */ /* 2009/11/25 */ /***********************/ /* jquery플러그인이므로 jquery를 필수로 사용해야 동작하는 스크립트입니다. pageAlign : center 또는 left pageWidth : 컨텐츠 블럭의 폭(필수값) type : right 또는 left(pageAlign의 값을 center로 했을때만 left값 사용가능) topMargin : 페이지 최상단과의 거리 minTop : 스크롤 했을때 브라우저 상단과의 거리(topMargin과 같은 값을 넣으면 같은 높이 유지) margin : 컨텐츠 블럭과의 좌 또는 우의 마진(left일때는 오른쪽 마진, right일때는 왼쪽 마진) speed : 따라다니는 속도 easing : linear 또는 swing (easing plugin 플러그인을 쓴다면 플러그인 옵션값을 모두 사용할 수 있음) zindex : 필요하다면... */ (function($) { var $doc = $(document); var $win = $(window); $.fn.scrollFollower = function (options){ var options = $.extend({}, $.fn.scrollFollower.defaults, options); if (options.pageWidth) var pageWidth = parseInt(options.pageWidth); else { alert('pageWidth는 필수 옵션값입니다.'); return false; } var $layer = $(this); var varType = options.varType; var pageAlign = options.pageAlign; var offset = pageWidth/2; var layerPositon = options.type; var margin = parseInt(options.margin); var speed = parseInt(options.speed); var easing = options.easing; var topMargin = parseInt(options.topMargin); var minTop = parseInt(options.minTop); var marginResult = offset + margin; var settedtop = topMargin + minTop; $layer.css('z-index', options.zindex); $layer.css("position","absolute"); if (layerPositon === 'left') varType = 'right'; function resetXPosition() { if (pageAlign === 'center') { var $screenSize = $('body').width(); var halfScreenSize = $screenSize/2; xPosition = halfScreenSize + marginResult; } else if (pageAlign === 'left') { varType = 'left'; xPosition = pageWidth + margin; } $layer.css(varType, xPosition); } resetXPosition(); $layer.css('top',topMargin); $win.resize(resetXPosition); $win.scroll(function(){ $top = $doc.scrollTop(); if ($top > settedtop) yPosition = $top + minTop; else if ($top < topMargin) yPosition = topMargin; $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false}); }); }; $.fn.scrollFollower.defaults = { varType:'left', pageAlign:'left', type:'left', topMargin:0, minTop:0, margin:0, speed:1000, easing:'linear', zindex:10 }; })( jQuery );

follwer.zip