| // 스크립트 소스
<script type="text/javascript">
<!--
var stmnLEFT = 790; // 왼쪽 여백 (메뉴가 왼쪽에서 400픽셀 떨어진 곳에 보여집니다)
var stmnGAP1 = 200; // 위쪽 여백 (메뉴가 위에서 10픽셀 떨어진 곳에 보여집니다)
var stmnGAP2 = 100; // 스크롤시 브라우저 위쪽과 떨어지는 거리
var stmnBASE = 200; // 스크롤 시작위치
var stmnActivateSpeed = 1;
var stmnScrollSpeed = 1;
var stmnTimer;
function ReadCookie(name) {
var cookies = document.cookie.split(";");
for(var i=0; i<cookies.length; i++) {
if(cookies[i].indexOf("=") == -1) {
if(name == cookies[i])
return "";
}
else {
var crumb = cookies[i].split("=");
if(name == crumb[0].trim())
return unescape(crumb[1].trim());
}
}
}
function SaveCookie(name, value, days, domain) {
var expires = "";
var _domain = '';
if(days) {
var date = new Date();
date.setTime(date.getTime() + (days * 86400000));
expires = "; expires=" + date.toGMTString();
}
if(domain) {
_domain = 'domain='+domain
}
document.cookie = name + "=" + value + expires + "; path=/;"+_domain;
}
function RefreshStaticMenu() {
var stmnStartPoint, stmnEndPoint;
stmnStartPoint = parseInt(document.getElementById('STATICMENU').style.top, 10);
stmnEndPoint = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
if (stmnStartPoint != stmnEndPoint) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
document.getElementById('STATICMENU').style.top = parseInt(document.getElementById('STATICMENU').style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount ) + 'px';
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout("RefreshStaticMenu();", stmnActivateSpeed);
}
function ToggleAnimate() {
if (document.getElementById('fixed-scroll').checked) {
clearTimeout(stmnTimer);
document.getElementById('STATICMENU').style.top = stmnGAP1 + 'px';
SaveCookie("fixed-scroll", "true", 300);
} else {
SaveCookie("fixed-scroll", "false", 300);
RefreshStaticMenu();
}
}
function InitializeStaticMenu() {
document.getElementById('STATICMENU').style.left = stmnLEFT + 'px';
if (ReadCookie("fixed-scroll") == "true") {
document.getElementById('fixed-scroll').checked = true;
document.getElementById('STATICMENU').style.top = document.body.scrollTop + stmnGAP1 + 'px';
} else {
document.getElementById('fixed-scroll').checked = false;
document.getElementById('STATICMENU').style.top = document.body.scrollTop + stmnBASE + 'px';
RefreshStaticMenu();
}
}
//-->
</script>
위 스크립트를 하기와 같이 <body> 태크 안에서 사용한다.
<body onload="InitializeStaticMenu();">
<a name="top"></a>
<s_t3>
<div id="STATICMENU" class="sidebarCenter">
<s_sidebar_element>
<!-- 달력 모듈 -->
<div class="calendar">
[##_calendar_##]
</div>
</s_sidebar_element>
<div class="dot" style="margin:10px 0 15px 0"></div>
<s_sidebar_element>
<!-- 카테고리 모듈 -->
<div class="category">
[##_category_##] </div>
</s_sidebar_element>
<div class="toggle" style="margin:10px 0 5px 0"><input id="fixed-scroll" type="checkbox" onclick="ToggleAnimate();" style="border:0; width:15px; height:15px;" /><label for="fixed-scroll"> 체크시 메뉴이동 끄기</label></div>
<div style="float:right"><a href="#top"><img src="./images/top.gif" width="31" height="8" border="0"></a></div>
</div>
<div> 태그 아이디가 STATICMENU 이어야한다.
참고로 sidebarCenter 에 대한 CSS 는 다음과 같다.
.sidebarCenter { padding:10px 0 0 5px; font-size:0.9em; position:absolute; left:790px; top:0px; width:190px;} |
