묻고답하기
메뉴가 스크롤바 따라가는거 설명좀..
2002.08.25 02:11
이거 제로보드 홈같이 하려면 어떠케 해야하는지 설명좀....
메뉴 스크롤바 따라다니는 것
우선 <head></head> 사이에 아래 내용을 넣습니다.
<style type="text/css">
<!--
#floater {position:absolute; visibility:visible}
-->
</style>
<script language="JavaScript">
<!--
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
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.floater.style.pixelTop += percent;
if(NS) document.floater.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.floater.style.pixelLeft += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
//-->
</script>
그 다음 <body></body> 사이에 아래의 소스를 넣습니다.
<div id=floater style="left:0; top:150; width:119; height:53; z-index:10">내용</div>
간단한 설명을 말 하자면(신의 키스님 홈 내용 인용)
스크롤바를 따라다니는 것은 <div>로 둘러쌓인 레이어입니다.
left:0; top150 은 레이어의 위치입니다. left:0 은 왼쪽0, 위 150의 위치에 레이어가 위치하게 합니다. 따라서 왼쪽에 딱 달라붙고 위로부터 150만큼 떨어진 곳에서 레이어가 스크롤바를 따라다니게 된거죠.
만약 left값과 top값을 모두 0으로 한다면 왼쪽 맨 위 구석에서 따라다니게 되고, right값과 top값을 모두 0으로 한다면, 오른쪽 맨 위 구석에서 따라다니게 됩니다.
width:100, height:50은 레이어의 사이즈입니다. 레이어 안에 들어가는 내용에 맞춰 사이즈를 조절해주시면 됩니다. 119은 레이어의 폭(가로사이즈), 53은 레이어의 높이(세로사이즈)입니다. 예제에 사용된 레이어는 가로 119, 세로 53짜리의 이미지 하나만 레이어 안에 들어갔으므로 width:100, height:50 가 됐습니다.
레이어 안에 들어가는 내용 부분에는 간단한 이미지 하나만 넣으셔도 되고, 텍스트만 넣어도 됩니다. 테이블을 넣어도 되구요.
이거 자세히 설명좀.....
메뉴 스크롤바 따라다니는 것
우선 <head></head> 사이에 아래 내용을 넣습니다.
<style type="text/css">
<!--
#floater {position:absolute; visibility:visible}
-->
</style>
<script language="JavaScript">
<!--
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
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.floater.style.pixelTop += percent;
if(NS) document.floater.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.floater.style.pixelLeft += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
//-->
</script>
그 다음 <body></body> 사이에 아래의 소스를 넣습니다.
<div id=floater style="left:0; top:150; width:119; height:53; z-index:10">내용</div>
간단한 설명을 말 하자면(신의 키스님 홈 내용 인용)
스크롤바를 따라다니는 것은 <div>로 둘러쌓인 레이어입니다.
left:0; top150 은 레이어의 위치입니다. left:0 은 왼쪽0, 위 150의 위치에 레이어가 위치하게 합니다. 따라서 왼쪽에 딱 달라붙고 위로부터 150만큼 떨어진 곳에서 레이어가 스크롤바를 따라다니게 된거죠.
만약 left값과 top값을 모두 0으로 한다면 왼쪽 맨 위 구석에서 따라다니게 되고, right값과 top값을 모두 0으로 한다면, 오른쪽 맨 위 구석에서 따라다니게 됩니다.
width:100, height:50은 레이어의 사이즈입니다. 레이어 안에 들어가는 내용에 맞춰 사이즈를 조절해주시면 됩니다. 119은 레이어의 폭(가로사이즈), 53은 레이어의 높이(세로사이즈)입니다. 예제에 사용된 레이어는 가로 119, 세로 53짜리의 이미지 하나만 레이어 안에 들어갔으므로 width:100, height:50 가 됐습니다.
레이어 안에 들어가는 내용 부분에는 간단한 이미지 하나만 넣으셔도 되고, 텍스트만 넣어도 됩니다. 테이블을 넣어도 되구요.
이거 자세히 설명좀.....