레이어 위치 고정하기 | ../ |
페이지 오른쪽 끝에 고정하기(990420)
페이지에서 주기능을 하는 레이어를 페이지의 크기에 상관없이 일정한 위치에 고정할 필요가 있습니다. 가령, 한 페이지가 넘어 이동막대가 생기서 이동막대를 끌어 옮기면 레이어도 같이 이동합니다. 이 때, 레이어를 페이지의 특정위치에 고정하는 방법입니다.ie4는 scroll 이벤트가 있습니다. 이 이벤트는 이동막대를 끌거나 자판으로 페이지를 움직이면 일어납니다. 하지만, nn4는 scroll같은 이벤트가 없습니다. 그래서, 다른 방법을 찾아야 하는데, 무한루프를 만들면 됩니다. 어떤 함수를 계속 호출한다는 말입니다. 무한 루프를 ie4나 nn4에 둘 다 적용할 수 있는데, ie4의 scroll 이벤트가 이 기능에는 작동효과가 부드럽습니다.
function init() {
if(document.layers) {
document.D1.top = window.pageYOffset
setTimeout("init()", 111)
}
else if(document.all)
window.onscroll = new Function("document.all.D1.style.pixelTop = document.body.scrollTop")
}
</script>
</head>
<body onLoad="init()">
<div id=D1 style="position:absolute; top:0; left:0; color:white; width:100; height:50;
clip:rect(0,100,50,0); background-color:blue; layer-background-color:blue;">
고정된 레이어
</div>
<div id=D2 style="position:absolute; top:0; left:100; color:white; width:100; height:50;
clip:rect(0,100,50,0); background-color:red; layer-background-color:red;">
고정 안됨
</div>
로 ie4에게는 scroll 이벤트를 지정하고 nn4에게는 일정한 시간경과 후 계속 레이어의 top값을 갱신합니다.
여기서는 페이지의 가장위에 레이어가 오게 window.pageYOffset, document.body.scrollTop를 지정했습니다. 이제 고정된 레이어는 페이지 내용의 크기에 상관없이 페이지에서 가장 위에 항상 위치합니다.