반응형
적용방법은 간단히, 상단에 해당 스크립트를 넣어준 다음, 실제 움직이는 메뉴(position:absolute;)를 만들어주시면 되는 겁니다.
상단(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>
출처: http://seevaa.net/157
반응형
'멋진성이의 지식iN' 카테고리의 다른 글
| linux 관련 정보 명령어 (0) | 2009.12.13 |
|---|---|
| [넷북] MSI U210 (0) | 2009.12.12 |
| 구글 배너 삽입 상단 큰거 2개 (0) | 2009.12.12 |
| [윈도우7] Windows 7 Christmas themepack (50) | 2009.12.09 |
| 내가 정말 정말 해이트 하는 거!! 옆굴공격 (1) | 2009.12.06 |
