스크롤에 따른 레이어 이동

* 스크롤의 이동에 따라 레이어도 따라 내려오는 스크립트 소스


- . 스크립트 소스

  <script>

self.onError=null;

currentX = currentY = 0;

whichIt = null;

lastScrollX = 0;

lastScrollY = 0;

NS = (document.layers) ? 1 : 0;

IE = (document.all) ? 1: 0;

function ScrollLayer() {

if(IE) {

diffY = document.body.scrollTop;

diffX = 0;

}

if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }

if(diffY != lastScrollY) {

percent = .1 * (diffY - lastScrollY);

if(percent > 0) percent = Math.ceil(percent);

else percent = Math.floor(percent);

if(IE) document.all.movelayer.style.pixelTop += percent;

if(NS) document.movelayer.top += percent;

lastScrollY = lastScrollY + percent;

}

if(diffX != lastScrollX) {

percent = .1 * (diffX - lastScrollX);

if(percent > 0) percent = Math.ceil(percent);

else percent = Math.floor(percent);

if(IE) document.all.movelayer.style.pixelLeft += percent;

if(NS) document.movelayer.top += percent;

lastScrollY = lastScrollY + percent;

}

}

if(NS || IE) action = window.setInterval('ScrollLayer()',1);

</script>

 



- . 움직이는 레이어의 스타일 시트

  <style type="text/css">

#movelayer {

POSITION: absolute;

TOP: 0px;

VISIBILITY: visible;

WIDTH: 170px;

Z-INDEX: 10

}

</style>



- .  실제 움직이는 div 태그

<div align="left" id="movelayer" style="HEIGHT: 30px; TOP: 205px; VISIBILITY: visible; WIDTH: 170px">

<a href="#top">위로 </a>

</div>




* 레이어의 위치를 고정하려면 style 항목에서 left, top 속성을 변경하면 지정해준 위치에 레이어가 표시됨