스크롤 따라 움직이는 메뉴
2011. 7. 25. 09:43ㆍ컴퓨터_computer/JAVASCRIPT
활용예는 여느 사이트에서 많이 보셨겠지만 스크롤에 따라 같이 움직이는 겁니다.
스크롤압박을 도와주기 위해 맨 윗부분으로 가는 링크를 사용하였는데 이것 뿐만 아니라 다른 메뉴(링크)도 추가하실 수 있습니다.
스크롤압박을 도와주기 위해 맨 윗부분으로 가는 링크를 사용하였는데 이것 뿐만 아니라 다른 메뉴(링크)도 추가하실 수 있습니다.
적용방법은 간단히, 상단에 해당 스크립트를 넣어준 다음, 실제 움직이는 메뉴(position:absolute;)를 만들어주시면 되는 겁니다.
1. 상단(head)에 들어갈 스크립트
<script type="text/javascript">
<!--
var stmnLEFT =0; // 왼쪽 여백 (메뉴가 왼쪽에서 400픽셀 떨어진 곳에 보여집니다)
var stmnGAP1 = 160; // 위쪽 여백 (메뉴가 위에서 10픽셀 떨어진 곳에 보여집니다)
var stmnGAP2 = 160; // 스크롤시 브라우저 위쪽과 떨어지는 거리
var stmnBASE = 160; // 스크롤 시작위치
var stmnActivateSpeed = 35;
var stmnScrollSpeed = 20;
var stmnTimer;
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 InitializeStaticMenu() {
document.getElementById('STATICMENU').style.left = stmnLEFT + 'px';
document.getElementById('STATICMENU').style.top = document.body.scrollTop + stmnBASE + 'px';
RefreshStaticMenu();
}
//-->
</script>
위 스크립트를 <head> </head>사이에 넣어줍니다.
위에서 주석처러 된부분은 실제 메뉴부분이 들어갈 위치와 스크롤스피드이니 그에 맞게 각자 수정하셔야 됩니다.
2. <body> 에도 아래와 같이 추가합니다.
<body onload="InitializeStaticMenu();">
3. 실제 보이는 메뉴부분 만들기
각자 만들고 싶은 메뉴를 만드시면 됩니다. 단, 그부분 id 를 "STATICMENU"로 지정하시고, style을 position:absolute로 해주셔야 되는 겁니다.
예)
<div id="STATICMENU" style="padding:0; margin:0; position:absolute; z-index:1;">
<a href="링크" >링크</a>
<a href="링크" >링크</a>
또는 이미지나 여러가지...
</div>
저의 적용 예)
<div id="STATICMENU">
<a href="#container" onfocus='this.blur()' class="scrolltop"></a>
</div>
저는 스타일부분을 css로 넘겼습니다.
css 해당부분 예)
#STATICMENU { padding:0; margin:0; position:absolute; width:40px; z-index:1;}
#STATICMENU .scrolltop {display:block; width:40px; height:15px; background:url("./images/top.gif") top left no-repeat; }
#STATICMENU .scrolltop:hover {background:url("./images/top-on.gif") top left no-repeat; }
쉽게 설명드린건지 모르겠네요~ 안되는 부분은 댓글달아주세요~ ^-^;;
스르륵 열리는 부분(about, gallery)도 같이 올리려했는데, 넘 길어지는군요... 이것도 이어서 올려보겠습니다.