스크롤바 따라 다니는 메뉴 스크립트
여기저기 여러가지 프로그램이 있지만 이게 좋더군요.
어디서 나온건지는 잘 모르겠지만, 지식인에 많이 돌아다니고 있네요.
지식인에 있는 소스들을 잘 봐도 대부분은 html 태그로 인해서 잘린 부분들도 있고, 그래서 정상적으로 동작하지 않는 것들이 많습니다.
완전하게 동작하도록 수정하고, 설명 추가했습니다.
아래 <html>부터 </html>까지 복사해서 확장자를 html로 저장하면 바로 동작합니다.
<html>
<head>
<title>스크롤되는 메뉴</title>
<style type="text/css">
body, td { font-family:Tahoma,굴림; font-size:9pt; color:#222222; }
</style>
<!-- 우선 <head>와 </head> 사이에 다음의 스크립트를 넣는다. -->
<!-- =========== 여기부터 =========== -->
<script language="javascript">
<!--
var stmnLEFT = 610; // 스크롤메뉴의 좌측 위치
var stmnGAP1 = 148; // 페이지 헤더부분의 여백
var stmnGAP2 = 50; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 0; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 100; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 7; // 스크롤되는 속도 (클수록 늦게 움직임)
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 = true;
STATICMENU.style.top = document.body.scrollTop + stmnGAP1;
}
else {
ANIMATE.checked = false;
STATICMENU.style.top = document.body.scrollTop + stmnBASE;
RefreshStaticMenu();
}
}
-->
</script>
<!-- =========== 여기까지 =========== -->
</head>
<body>
<!-- =========== 여기부터 =========== -->
<!-- 실제로 나타나야 될 내용을 <div>와 </div> 사이에 넣는다. -->
<!-- div의 위치나 크기는 적당하게 바꾼다. -->
<!-- 테이블을 이용해서 필요한 모양으로 만든다. -->
<!-- 위치고정이란 체크박스에 체크하면 스크롤이 되지 않는다. -->
<DIV id="STATICMENU" style="width:180px; height:350px; position:absolute; left:600px; top:0px; z-index:9;">
<table width="180" cellspacing="0" cellpadding="0" border="1" bordercolor="#cccccc">
<tr>
<td><iframe src='http://weather.superboard.com/wxbn.cgi?db=59_section21&skin=yellow002' width='180' height='118' allowtransparency='true' frameborder='no' scrolling='no' leftmargin='0' topmargin='0' marginwidth='0'></iframe></td>
</tr>
<tr>
<td align=center>첫번째 줄</td>
</tr>
<tr>
<td align=center><a href="http://www.naver.com">네이버로가기</a></td>
</tr>
</table>
<center><INPUT id="ANIMATE" onclick="ToggleAnimate();" type="checkbox">위치고정</center>
</div>
<!-- 스크롤 메뉴를 초기화하는 부분 -->
<script language="javascript">
InitializeStaticMenu(); // 스크롤메뉴를 초기화하는 자바스크립트
</script>
<!-- =========== 여기까지 =========== -->
</body>
</html>[펌] 스크롤바 따라 다니는 메뉴 스크립트