글
JAVA Script Source 스크롤바를 따라다니는 메뉴 1 에 비해 미끄러지는 듯한 느낌이 들면서 보다 부드럽게 따라다닙니다. 레이어 안을 텍스트, 이미지, 테이블 등으로 채워 보조메뉴로 활용하기 좋습니다. 1. <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> ---------------------------------------------------------------------------------------- 2. </body>의 바로 앞, 즉 본문의 맨 끝에 아래 소스를 넣습니다. ---------------------------------------------------------------------------------------- <div id=floater style="left:0; top:150; width:119; height:53; z-index:10">내용</div> ---------------------------------------------------------------------------------------- left:0; top150 은 레이어의 위치입니다. left:0 은 왼쪽0, 위 150의 위치에 레이어가 위치하게 합니다. 따라서 왼쪽에 딱 달라붙고 위로부터 150만큼 떨어진 곳에서 레이어가 스크롤바를 따라다니게 된거죠. 만약 left값과 top값을 모두 0으로 한다면 왼쪽 맨 위 구석에서 따라다니게 되고, right값과 top값을 모두 0으로 한다면, 오른쪽 맨 위 구석에서 따라다니게 됩니다. width:119, height:53은 레이어의 사이즈입니다. 레이어 안에 들어가는 내용에 맞춰 사이즈를 조절해주시면 됩니다. 119은 레이어의 폭(가로사이즈), 53은 레이어의 높이(세로사이즈)입니다. 예제에 사용된 레이어는 가로 119, 세로 53짜리의 이미지 하나만 레이어 안에 들어갔으므로 width:119, height:53 이 됐습니다. 레이어 안에 들어가는 내용 부분에는 간단한 이미지 하나만 넣으셔도 되고, 텍스트만 넣어도 됩니다. 테이블을 넣어도 되구요.
<!--
#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> ---------------------------------------------------------------------------------------- 2. </body>의 바로 앞, 즉 본문의 맨 끝에 아래 소스를 넣습니다. ---------------------------------------------------------------------------------------- <div id=floater style="left:0; top:150; width:119; height:53; z-index:10">내용</div> ---------------------------------------------------------------------------------------- left:0; top150 은 레이어의 위치입니다. left:0 은 왼쪽0, 위 150의 위치에 레이어가 위치하게 합니다. 따라서 왼쪽에 딱 달라붙고 위로부터 150만큼 떨어진 곳에서 레이어가 스크롤바를 따라다니게 된거죠. 만약 left값과 top값을 모두 0으로 한다면 왼쪽 맨 위 구석에서 따라다니게 되고, right값과 top값을 모두 0으로 한다면, 오른쪽 맨 위 구석에서 따라다니게 됩니다. width:119, height:53은 레이어의 사이즈입니다. 레이어 안에 들어가는 내용에 맞춰 사이즈를 조절해주시면 됩니다. 119은 레이어의 폭(가로사이즈), 53은 레이어의 높이(세로사이즈)입니다. 예제에 사용된 레이어는 가로 119, 세로 53짜리의 이미지 하나만 레이어 안에 들어갔으므로 width:119, height:53 이 됐습니다. 레이어 안에 들어가는 내용 부분에는 간단한 이미지 하나만 넣으셔도 되고, 텍스트만 넣어도 됩니다. 테이블을 넣어도 되구요.
'JS > jsajax' 카테고리의 다른 글
| 설치형 TC에 Ajax 적용해보았다. (0) | 2012.01.16 |
|---|---|
| 티스토리에 jQuery Ajax를 적용시켜 보았다 (0) | 2012.01.16 |
| 비 전문가를 위한 XMLHttpRequest 활용 소개 (0) | 2009.01.12 |
| 세션 상태를 사용하여 불필요한 Ajax 트래픽 피하기 (한글) (0) | 2009.01.05 |
| Ajax로 실시간 갱신 하기 (0) | 2008.06.21 |
| 한번에 페이지내의 모든 이미지의 링크 점선/테두리 없애는 스크립트 (0) | 2008.05.30 |
| 레이어형식 화면고정하는, 스크롤바를 따라다니는 TOP 버튼 (0) | 2008.02.26 |
| 새 창의 링크로 부모창에 결과출력 (0) | 2008.02.26 |
| [JS] 스크롤바 따라다니는 메뉴 1 (0) | 2008.02.26 |
RECENT COMMENT