스크롤 메뉴 (체크박스 체크하면 쿠키로 기억하여 스크롤 기능이 정지됩니다.)
페이지 정보
작성자 서방님 댓글 0건 조회 175회 작성일 07-08-11 15:20본문
<html>
<head>
<title>http://www.blueb.co.kr</title>
<script language="javascript">
<!--
var stmnLEFT = 210; // 왼쪽 여백 (메뉴가 왼쪽에서 10픽셀 떨어진 곳에 보여집니다)
var stmnGAP1 = 210; // 위쪽 여백 (메뉴가 위에서 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 cellpadding="4" cellspacing="1" bgcolor="999999">
<tr bgcolor=efefef>
<td><p>메뉴 - 1</p> </td>
</tr>
<tr bgcolor=efefef>
<td><p>메뉴 - 2</p> </td>
</tr>
<tr bgcolor=efefef>
<td><p>메뉴 - 3</p> </td>
</tr>
<tr bgcolor=efefef>
<td><p>메뉴 - 4</p> </td>
</tr>
<tr bgcolor=efefef>
<td><p>메뉴 - 5</p> </td>
</tr>
<tr bgcolor=efefef>
<td><p>메뉴 - 6</p> </td>
</tr>
<tr>
<td>
<p><input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"><font color=white>스크롤 기능 끄기</p>
</td>
</tr>
</table>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
