[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


  1. /***********************/  
  2. /* fireskill@gmail.com */  
  3. /* http://blog.bits.kr */  
  4. /*          2009/11/25 */  
  5. /***********************/  
  6.   
  7. /* 
  8. jquery플러그인이므로 jquery를 필수로 사용해야 동작하는 스크립트입니다. 
  9.  
  10. pageAlign : center 또는 left 
  11. pageWidth : 컨텐츠 블럭의 폭(필수값) 
  12. type      : right 또는 left(pageAlign의 값을 center로 했을때만 left값 사용가능) 
  13. topMargin : 페이지 최상단과의 거리 
  14. minTop    : 스크롤 했을때 브라우저 상단과의 거리(topMargin과 같은 값을 넣으면 같은 높이 유지) 
  15. margin    : 컨텐츠 블럭과의 좌 또는 우의 마진(left일때는 오른쪽 마진, right일때는 왼쪽 마진) 
  16. speed     : 따라다니는 속도 
  17. easing    : linear 또는 swing (easing plugin 플러그인을 쓴다면 플러그인 옵션값을 모두 사용할 수 있음) 
  18. zindex    : 필요하다면... 
  19. */  
  20. (function($) {  
  21.   var $doc = $(document);  
  22.   var $win = $(window);  
  23.   $.fn.scrollFollower = function (options){  
  24.     var options = $.extend({}, $.fn.scrollFollower.defaults, options);  
  25.         if (options.pageWidth)  
  26.             var pageWidth    = parseInt(options.pageWidth);  
  27.         else  
  28.         {  
  29.             alert('pageWidth는 필수 옵션값입니다.');  
  30.             return false;  
  31.         }  
  32.     var $layer = $(this);  
  33.     var varType      = options.varType;  
  34.     var pageAlign    = options.pageAlign;  
  35.     var offset       = pageWidth/2;  
  36.     var layerPositon = options.type;  
  37.     var margin       = parseInt(options.margin);  
  38.     var speed        = parseInt(options.speed);  
  39.     var easing       = options.easing;  
  40.     var topMargin    = parseInt(options.topMargin);  
  41.     var minTop       = parseInt(options.minTop);  
  42.     var marginResult = offset + margin;  
  43.     var settedtop    = topMargin + minTop;  
  44.     $layer.css('z-index', options.zindex);  
  45.     $layer.css("position","absolute");  
  46.     if (layerPositon === 'left')  
  47.      varType = 'right';  
  48.     function resetXPosition()  
  49.     {  
  50.       if (pageAlign === 'center')  
  51.       {  
  52.         var $screenSize = $('body').width();  
  53.         var halfScreenSize = $screenSize/2;  
  54.         xPosition = halfScreenSize + marginResult;  
  55.       }  
  56.       else if (pageAlign === 'left')  
  57.       {  
  58.         varType   = 'left';  
  59.         xPosition = pageWidth + margin;  
  60.       }  
  61.       $layer.css(varType, xPosition);  
  62.     }  
  63.     resetXPosition();  
  64.     $layer.css('top',topMargin);  
  65.     $win.resize(resetXPosition);  
  66.     $win.scroll(function(){  
  67.       $top = $doc.scrollTop();  
  68.       if ($top > settedtop)  
  69.         yPosition = $top + minTop;  
  70.       else if ($top < topMargin)  
  71.         yPosition = topMargin;  
  72.       $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});  
  73.     });  
  74.   };  
  75.   $.fn.scrollFollower.defaults = {  
  76.     varType:'left',  
  77.     pageAlign:'left',  
  78.     type:'left',  
  79.     topMargin:0,  
  80.     minTop:0,  
  81.     margin:0,  
  82.     speed:1000,  
  83.     easing:'linear',  
  84.     zindex:10  
  85.     };  
  86. })( jQuery );  


Posted by TheBits