메뉴 건너뛰기

검색창 닫기

tnt_lang

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

박상현 2003.12.04 13:53 조회 수 : 1575 추천: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>
이 게시물을
이 글의 추천인 목록 수정 삭제 목록
쓰기 태그
위로