메뉴 건너뛰기

검색창 닫기

tnt_lang

html/script 스크롤바를 따라다니는 메뉴판

박상현 2003.12.04 13:53 조회 수 : 1527 추천:36

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>스크롤바 따라다니는 메뉴 </title>

<style>
<!--
body,td{font-size:10pt}
//-->
</style>

<script language="javascript">
<!--
var stmnLEFT = 10; // 왼쪽 여백 (메뉴가 왼쪽에서 10픽셀 떨어진 곳에 보여집니다)
var stmnGAP1 = 10; // 위쪽 여백 (메뉴가 위에서 10픽셀 떨어진 곳에 보여집니다)
var stmnGAP2 = 10; // 스크롤시 브라우저 위쪽과 떨어지는 거리
var stmnBASE = 150; // 스크롤 시작위치
var stmnActivateSpeed = 200;
var stmnScrollSpeed = 10;

var stmnTimer;

function ReadCookie(name)
{
var label = name + "=";
var labelLen = label.length;
var cLen = document.cookie.length;
var i = 0;

while (i < cLen) {
var j = i + labelLen;

if (document.cookie.substring(i, j) == label) {
var cEnd = document.cookie.indexOf(";", j);
if (cEnd == -1) cEnd = document.cookie.length;

return unescape(document.cookie.substring(j, cEnd));
}

i++;
}

return "";
}

function SaveCookie(name, value, expire)
{
var eDate = new Date();
eDate.setDate(eDate.getDate() + expire);
document.cookie = name + "=" + value + "; expires=" + eDate.toGMTString()+ "; path=/";
}

function RefreshStaticMenu()
{
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;

stmnStartPoint = parseInt(STATICMENU.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;

stmnRefreshTimer = stmnActivateSpeed;

if ( stmnStartPoint != stmnEndPoint ) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );

stmnRefreshTimer = stmnScrollSpeed;
}

stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}

function ToggleAnimate()
{
if (ANIMATE.checked) {
RefreshStaticMenu();
SaveCookie("ANIMATE", "true", 300);
}
else {
clearTimeout(stmnTimer);
STATICMENU.style.top = stmnGAP1;
SaveCookie("ANIMATE", "false", 300);
}
}

function InitializeStaticMenu()
{
STATICMENU.style.left = stmnLEFT;

if (ReadCookie("ANIMATE") == "false") {
ANIMATE.checked = false;
STATICMENU.style.top = document.body.scrollTop + stmnGAP1;
}
else {
ANIMATE.checked = true;
STATICMENU.style.top = document.body.scrollTop + stmnBASE;
RefreshStaticMenu();
}
}
//-->
</script>

</head>
<body onLoad="InitializeStaticMenu();">
<div id="STATICMENU" style="width:200px; height:200px; position:absolute; left:-5000px; top:0px; z-index:100;">
<table style="border:solid 1px silver;" cellpadding="2" cellspacing="2" width="200"bgcolor="white">
<tr>
<td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p>메뉴 - 1</p> </td>
</tr>
<tr>
<td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p>메뉴 - 2</p> </td>
</tr>
<tr>
<td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p>메뉴 - 3</p> </td>
</tr>
<tr>
<td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p>메뉴 - 4</p> </td>
</tr>
<tr>
<td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p>메뉴 - 5</p> </td>
</tr>
<tr>
<td width="200" style="border-bottom:1px silver solid" bgcolor="white" align=center><p>메뉴 - 6</p> </td>
</tr>
<tr>
<td width="200" align=center>
<p><input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();">스크롤 기능 끄기</p>
</td>
</tr>
</table>
</div>


<table>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
<tr><td>asdfjlaskdflaksdlfaksdjfasdlfkasldkfjasldkfjlsd</td></tr>
</table>

</body>
</html>
이 게시물을
수정 삭제 목록
번호 제목 글쓴이 날짜 조회 수
38 orion와 eclipse을 이용하여 EJB개발시 참고(내부개발용) 박상현 2004.06.22 2385
37 주소 감추기 박상현 2004.06.13 1878
36 javascript: event,this는 사용할 수 없습니다 박상현 2004.06.13 1694
35 점선없애기 박상현 2004.06.13 1891
34 <table></table>을 스크롤 시키기 박상현 2004.04.09 1699
33 td및 tr의 위치 알아내기 박상현 2004.01.31 2655
32 자바스크립트 펑션 및 변수 공유 박상현 2004.01.07 2284
» 스크롤바를 따라다니는 메뉴판 박상현 2003.12.04 1527
30 스크롤바를 따라다니는 이미지 박상현 2003.12.04 1616
29 이벤트 종류알기 및 좌표 읽기 박상현 2003.12.03 1935
28 문서크기에 맞게 아이프레임폭 자동으로 조정하기 박상현 2003.11.17 1865
27 목록에서 선택된 라인에만 색칠하고 다른것은 이전색으로 변경하기 박상현 2003.11.13 1641
26 목록에서 다중 선택된 항목을 표시(특정색상)하고 체크박스를 선택해주는 스크립트 박상현 2003.11.07 2789
25 여러가지의 색으로 롤오버 효과및 항목을 선택시 선택된 색을 고정시키는 예제 박상현 2003.11.07 2148
24 쇼핑몰에 포함될 기능(참고) 박상현 2003.11.06 1559
23 한글처리 방법/절차 이해 박상현 2003.10.20 1873
22 event.keyCode의 숫자표 박상현 2003.10.20 1824
21 jsp페이지에서 popup창의 depth에 따른 메인 복귀 방법 달리하기... 박상현 2003.10.14 3411
20 배포하기(Cab 파일 작성법) 박상현 2003.10.13 2531
19 정수값을 3자리수마다 컴마를 찍기 박상현 2003.10.13 2121
쓰기 태그
위로