태그:             

스크롤바 따라 다니는 메뉴 스크립트

여기저기 여러가지 프로그램이 있지만 이게 좋더군요.

어디서 나온건지는 잘 모르겠지만, 지식인에 많이 돌아다니고 있네요.

지식인에 있는 소스들을 잘 봐도 대부분은 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;
&nbsp }
  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>

관련글

[펌] 스크롤바 따라 다니는 메뉴 스크립트

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다