[JavaScript] 화면 따라 이동하는 스크롤 배너 스크립트

파이어팍스(FireFox) 2.0 과 인터넷 익스플로러(Internet Explorer) 6.0 에서 작동되는것을 확인했다.

test.html과 같이 가급적이면 레이어 아래에 스크립트를 두어야 한다.

생성된 레이어를 스크립트에서 참조하기 때문이다.

test.html에서 top=140 값을 def_top에 정의해놓고 이용하게 했다.
페이지 마다 높이가 다 같지는 않으니까...

################## test.html ##################
<div id=divObj style="position:absolute; left:800; top:140">
화면 스크롤 따라서 이동하는 레이어
</div>
<script type="text/javascript" src="scroll.js"></script>
############################################

################## scroll.js ##################
<!-- 스크롤 배너 자바스크립트 시작 -->
var bNetscape4plus = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "4");
var bExplorer4plus = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substring(0,1) >= "4");

if(document.all) {
 //IE7 이하 버전에서 사용된다. 표준은 getElementById() 이고 IE6에서도 이상없다.
 var divObj = document.all['divObj'];  
 var def_top = parseInt(divObj.style.top);
}
else {
 var divObj = document.getElementById('divObj');
 var def_top = parseInt(divObj.style.top);
}

function return_scrollTop() {
 if (document.documentElement && document.documentElement.scrollTop)
  return document.documentElement.scrollTop;
 else if (document.body)
  return document.body.scrollTop;
 else
  return document["divObj"].top;
 
 return 0;
}

function CheckUIElements(){
      var yObjFrom, yObjTo, yMoveFrom, yMoveTo, yOffset, timeoutNextCheck;

      if ( bNetscape4plus ) {
              yObjFrom   = return_scrollTop();
              yObjTo     = top.pageYOffset + def_top;
      }
      else if ( bExplorer4plus ) {
              yObjFrom   = parseInt(divObj.style.top, 10);
              yObjTo     = return_scrollTop() + def_top;
      }

      timeoutNextCheck = 500;

      if ( Math.abs (yMoveFrom - (yObjTo + 152)) < 6 && yMoveTo < yMoveFrom ) {
              window.setTimeout ("CheckUIElements()", timeoutNextCheck);
              return;
      }

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

              if ( bNetscape4plus )
                      divObj.style.top = return_scrollTop() + def_top + yOffset;
              else if ( bExplorer4plus )
                      divObj.style.top = parseInt (divObj.style.top, 10) + yOffset;

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

              if ( bNetscape4plus )
                      divObj.style.top = return_scrollTop() + def_top + yOffset;
              else if ( bExplorer4plus )
                      divObj.style.top = parseInt (divObj.style.top, 10) + yOffset;

              timeoutNextCheck = 10;
      }

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

function OnLoad()
{
      var y;
      if ( top.frames.length )
      if ( bNetscape4plus ) {
              divObj.style.top = top.pageYOffset + def_top;
              divObj.style.visibility = "visible";
      }
      else if ( bExplorer4plus ) {

              divObj.style.top = return_scrollTop() + def_top;
              divObj.style.visibility = "visible";
      }
      CheckUIElements();
      return true;
}

OnLoad();
<!-- 스크롤 배너 스크립트 끝 -->
############################################