스크롤바 따라다니는 메뉴

퀵링크등에 쓰이는 스크롤바 움직임에 따라 따라다니는 레이어

<script language=javascript>
//******************************************************************************************************

// 스크롤바 따라다니는 메뉴

//******************************************************************************************************
function GoTop() {
 window.scrollTo(0,0);
}

function GoTop_Call() {
 document.body.ondblclick = Top; 
}


var Xpos = 0;
var Ypos = 0;



var bNetscape4plus = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "4");
var bExplorer4plus = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substring(0,1) >= "4");

function CheckUIElements()
{
        var yMenuFrom, yMenuTo, yButtonFrom, yButtonTo, yOffset, timeoutNextCheck;

        if ( bNetscape4plus ) { // 네츠케이프 용 설정
                yMenuFrom   = document["divMenu"].top;
                yMenuTo     = top.pageYOffset + 249;   // 위쪽 위치
        }
       else if ( bExplorer4plus ) {  // IE 용 설정
                yMenuFrom   = parseInt (divMenu.style.top, 10);

                if (document.body.scrollTop > 200) {
	                 yMenuTo     = document.body.scrollTop + 5;	
                } else {
    	            yMenuTo     = document.body.scrollTop + 249; // 위쪽 위치
                }
        }

        timeoutNextCheck = 500;

        if ( Math.abs (yButtonFrom - (yMenuTo + 152)) < 6 && yButtonTo < yButtonFrom ) {
                setTimeout ("CheckUIElements()", timeoutNextCheck);
                return;
        }


//alert(yMenuTo);

        if ( yButtonFrom != yButtonTo ) {
                yOffset = Math.ceil( Math.abs( yButtonTo - yButtonFrom ) / 10 );
                if ( yButtonTo < yButtonFrom )
                        yOffset = -yOffset;

                if ( bNetscape4plus )
                        document["divLinkButton"].top += yOffset;
                else if ( bExplorer4plus )
                        divLinkButton.style.top = parseInt (divLinkButton.style.top, 10) + yOffset;

                timeoutNextCheck = 10;
        }
        if ( yMenuFrom != yMenuTo ) {
                yOffset = Math.ceil( Math.abs( yMenuTo - yMenuFrom ) / 20 );
                if ( yMenuTo < yMenuFrom )
                        yOffset = -yOffset;

                if ( bNetscape4plus )
                        document["divMenu"].top += yOffset;
                else if ( bExplorer4plus )
                        divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;

                timeoutNextCheck = 10;
        }

        setTimeout ("CheckUIElements()", timeoutNextCheck);
}

function launcherLoad()
{
        var y;


        // 페이지 로딩시 포지션
        if ( bNetscape4plus ) {
                document["divMenu"].top = top.pageYOffset + 550;
                document["divMenu"].visibility = "visible";
        }
        else if ( bExplorer4plus ) {
                divMenu.style.top = document.body.scrollTop + 550;
                divMenu.style.visibility = "visible";
        }

        CheckUIElements();
        return true;
}


</script>

<div id="divMenu" style="width:73px; height:401px; position:absolute; left:871px; top:335px; z-index:1; visibility:visible;">
따라다니는 메뉴
</DIV>	
<script>
	launcherLoad();
</script>
따라다는다...는 메뉴
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
따라다는다...는 메뉴

# 다른 방법 (중앙 정렬 적용)
move_banner.js

var layerX = 0 ;              // 초기 Layer 값 - X
var layerY = 0 ;              // 초기 Layer 값 - Y
var layer_element = null;  // Slide대상 Layer

var scroll_direction = '';
var inquire_interval = 300; // 페이지가 이동한 좌표를 읽어올 간격 지정
var slide_interval = 5;       // Layer가 이동할 속도

var pick_fixed = false ;    // 고정상태 값
var tmr_id = null;

var browser_info = '';       // Browser 객체 정보 - Netscape , IE

function slideLayer( layer_id, direction, inquire, slide ){

  /*  브라우저 객체 종류를 읽어온다. */
   if( (navigator.appName == 'Netscape') && 
       parseInt(navigator.appVersion,10) <= 4 ){
       //netscape 4.0 이하 Browser
       browser_info = 'Ns4' ;  // Browser 객체 종류
       // Netcape 4.0 이하 버전에서 대상 Element 읽어오기
       layer_element = document.layers[layer_id];
   }
   else if( (navigator.appName == 'Netscape') && 
             parseInt(navigator.appVersion,10) > 4 ){
       //netscape 6.0 이상 Browser
       browser_info = 'Ns6' ;
       // netscape 6.0 이상 버전에서 대상 Element 읽어오기
       layer_element = document.getElementById(layer_id);
       layer_element = layer_element.style;  // Style 속성만 읽어온다.
  }
  else{
       // Explore 호환 Browser
       browser_info = 'Ie' ;
       //  대상 Element 읽어오기
       layer_element = document.all[layer_id].style; 
  }

  layer_element.visibility = 'visible'
   layer_element.position = 'absolute';
  inquire_interval  = parseInt(inquire,10);  // Layer 이동 간격
  slide_interval    = parseInt(slide,10);     // Layer 이동 속도
  scroll_direction = direction.toLowerCase();   // Layer 이동 방향

  /* 초기 Layer의 위치값을 전역변수에 대입한다.                               */
  /* Layer위치를 고정하거나 또는 페이지가 스크롤될 경우 Layer이동시  */
  /* 페이지에서 Layer 위치를 상대적으로 변경하기 위함                       */
  layerX = parseInt(layer_element.left, 10); 
  layerY = parseInt(layer_element.top, 10);
     
  onSlide();
}

/**************************************************************************
  현재 브라우저의 페이지 위치 값을 읽어와 대상 객체를 움직인 좌표만큼
이동한다.
**************************************************************************/
function onSlide(){
    var page_posX, page_posY, layer_posX, layer_posY;
    var slideX = 0, slideY = 0;
    var interval = 0;
    
    if (pick_fixed) return;

    /* 현재 나타나는 페이지의 x, y좌표값을 읽어온다. */
    if ( browser_info == 'Ie'){ // Expoler 호환 버전
       page_posX = document.body.scrollLeft  + layerX; 
       page_posY = document.body.scrollTop  + layerY; 
    }
    else if( browser_info == 'Ns4' || browser_info == 'Ns6' ){ // Netscape 버전
       page_posX = parseInt (window.pageXOffset, 10) + layerX;
       page_posY = parseInt (window.pageYOffset, 10) + layerY;
    }

    /* 현재 Layer 위치 값을 읽어온다. 전달받은 값은 'nnnnpx' 형식의 정수값이므로 */
    /* 정수화 한다.                                                                                        */
    layer_posX = parseInt(layer_element.left, 10);
    layer_posY = parseInt(layer_element.top, 10);

    /* Layer 이동이 끝난 후 다음 이동까지 간격 */
    interval = inquire_interval; 

    if (page_posX < layerX) page_posX = layerX;
    if (page_posY < layerY) page_posY = layerY;

    /* 페이지가 이동한 거리만큼 layer를 이동시킨다.    */
    if (page_posY != layer_posY || page_posX != layer_posX) {
      // Layer 이동이 끝 이동 거리 =  페이지가 이동 좌표 /  Layer Slide 간격
      slideX= Math.ceil( Math.abs(page_posX - layer_posX) / slide_interval ); 
      slideY = Math.ceil( Math.abs(page_posY - layer_posY) / slide_interval );

     
      if (page_posX < layer_posX)  slideX = -slideX;
      if (page_posY < layer_posY)  slideY = -slideY;

      if( scroll_direction != 'v') // Slide방향이 양측 또는 좌우 방향일때
          layer_element.left = parseInt(layer_element.left,10)   + slideX;

      if( scroll_direction != 'h')// Slide방향이 양측 또는 상하 방향일때
          layer_element.top = parseInt(layer_element.top ,10)  + slideY ;

       // Layer Slide 속도
      interval = slide_interval;
   }

   /* 함수 재귀호출 */
   setTimeout ("onSlide()", interval); 
}

/**************************************************************************
   Layer를 고정시키기 위한 함수
**************************************************************************/
function fixedLayer(){

    var page_posX, page_posY, layer_posX, layer_posY;
    var slideX = 0, slideY = 0;
    /* 현재 Layer 위치 값을 읽어온다. */
    layer_posX = parseInt(layer_element.left, 10);
    layer_posY = parseInt(layer_element.top, 10);

    /* Layer의 초기 위치로 이동시키기 위해 초기 Layer값을 Page 좌표값으로 대입한다.*/  
    page_posX = layerX;
    page_posY = layerY;

    /* Layer가 이동한 거리만큼 계산하여 메뉴를 이동시킨다.  */
    if (page_posY != layer_posY || page_posX != layer_posX) {
        slideX= Math.ceil( Math.abs(page_posX - layer_posX) / slide_interval ); 
        slideY = Math.ceil( Math.abs(page_posY - layer_posY) / slide_interval );

        if (page_posX < layer_posX)  slideX = -slideX;
        if (page_posY < layer_posY)  slideY = -slideY;

        layer_element.left = parseInt(layer_element.left,10)    + slideX;
        layer_element.top = parseInt(layer_element.top ,10)  + slideY ;

      setTimeout (" fixedLayer()", slide_interval); 
   }
   
}

/**************************************************************************
   Layer 고정 값 확인
**************************************************************************/
function checkFixed(obj_id){

   if ( browser_info == 'Ie' ){ // Expoler 호환 버전
       //  대상 Element 읽어오기
       var theObject = document.all[obj_id]; 
   }
   else if (browser_info == 'Ns6' ){
       var theObject = document.getElementById(obj_id);
   }
   else if (browser_info == 'Ns4' ){
      alert('죄송합니다. 현재 브라우저는 지원되지 않습니다.')
      // 위 형식으로는 지원 안됨 ~.~
      return;
   }

   /* 객체의 Type이 checkbox인지 확인 한다. */
   if ( theObject.type == 'checkbox' ){
      if ( (!theObject.checked) && (pick_fixed) ){  // Layer 이동
          pick_fixed = false;
          onSlide();
      }
      else if ( (theObject.checked) && (!pick_fixed) ){ // Layer 고정
          pick_fixed = true;
          fixedLayer();
     }      
  }

}

test.html (적용 페이지)

<script language=JavaScript type=text/JavaScript src=move_banner.js></script>
<div id="div_banner" style="width:100px; position:absolute; left:0px; top:0px; z-index:0; visibility:visible; left:expression((document.body.clientWidth)/2+405);">
<table id ="left_movebanner" style="position:absolute; visibility:visible; left:0px; top:157px; z-index:1; border:black 1px #FFFFFF solid" >
<tr>
	<td>움직인다...</td>
</tr>
</table>
</div>
<SCRIPT type=text/javascript>
document.onLoad=slideLayer('left_movebanner', 'n', '300', '10');
</script>
<table width=800 align=center bgcolor=#D6D7CF border=1><tr><td>test1</td></tr><tr><td height=1000>test2</td></tr></table>