[jQuery]스크롤 시 특정 위치에서 div 고정시키기(2)

버그 픽스버전이 포스팅 되었습니다
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
출처: https://blog.bits.kr/124 [echo "Hello world!!";:티스토리]

 

view plaincopy to clipboardprint?/***********************/  /* 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 );  /***********************/
/* 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 );
 
출처: https://blog.bits.kr/124 [echo "Hello world!!";:티스토리]