컴퓨터 tip, Program/블로그/인터넷

스크롤 따라다니는 메뉴(사이드배너,퀵메뉴) 소스

MOLA. 2011. 8. 12. 18:40


오늘은 스크롤을 따라다니는 광고 또는 메뉴, 퀵메뉴는 어떻게 설정하는지 알아보겠습니다~~!

*스크롤 따라다니는 경우는 2가지가 있는데요!

1. 스크롤에 따라 움직이지 않고 고정된 상태 (플로팅 메뉴 floating)
2. 스크롤에 따라 같이 스크롤되는 상태 (제이쿼리 jQuery/ 자바스크립트 javascript)

로 나뉩니다.

잘 와닿지 않으시나요?
부드럽게 따라오는 것과, 그렇지 않은것(고정됨)으로 나뉘는데,,,
2번이 좀더 많이 쓰이죠!!
티스토리 기준으로 설명하겠습니다,, (티스토리가 아닌 사이트에서도 충분히 가능할거에요)
그럼 천천히 알아볼까요?


1. 특정 위치 고정된 상태의 메뉴

  

 

   

쉽게 말하면, 트위터 follow me 사이드배너처럼 고정된 메뉴입니다.
소스는 아래. 순서대로.
'사이드바에 태그입력기로 넣어야 할 것' + 'skin.css에 넣어야 할 것'

(admin - 스킨 - 사이드바 설정 - 태그입력기) 

사이드바에 넣을 거.txt

 

<div id="floatdiv">
    <ul> 
   메뉴 또는 광고 소스를 넣으세요
   </ul>
</div>

 
(admin - 스킨 - html/css편집 - skin.css)

skin.css 에 넣을거.txt

 


/* 떠다니는 메뉴 (Floating Menu) */
 #floatdiv { 
    position:fixed; _position:absolute; _z-index:-1;
    width:170px;
    overflow:hidden;
    left:0px; //화면 왼쪽에 위치한다. right로 변경가능
    top:60px; //화면 위쪽과의 간격
    background-color: transparent;
    margin:0;
    padding:0;
}

#floatdiv ul  { list-style: none; }
#floatdiv li  { margin-bottom: 2px; text-align: center; }
#floatdiv a   { color: #5D5D5D; border: 0; text-decoration: none; display: block; }
#floatdiv a:hover, #floatdiv .menu  { background-color: #5D5D5D; color: #fff; }
#floatdiv .menu, #floatdiv .last    { margin-bottom: 0px; }





2. 자바스크립트를 이용한 스크롤시 같이 스크롤되는 메뉴

 




스크롤하면 같이 이동하는, 샤삭!
부드럽게 움직입니다.
현재 제 블로그에서 사용하고 있구요~
제이쿼리 jQuery를 사용..
자바java에 대해선 거의 문맹 수준입니다만..
겨우겨우 찾아가며 알아냈습니다.





(admin - 스킨 - html/css편집 - skin.html)
<head>와  </head> 사이에 아래 소스 삽입

head와 head 사이에.txt

 



<script type="text/javascript">
 var stmnLEFT = 10; // 오른쪽 여백
 var stmnGAP1 = 0; // 위쪽 여백
 var stmnGAP2 = 150; // 스크롤시 브라우저 위쪽과 떨어지는 거리
 var stmnBASE = 150; // 스크롤 시작위치
 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.right = stmnLEFT + 'px';  //처음에 오른쪽에 위치. left로 바꿔도.
  document.getElementById('STATICMENU').style.top = document.body.scrollTop + stmnBASE + 'px';
  RefreshStaticMenu();
  }
</script>

<style type="text/css">
#STATICMENU { margin: 0pt; padding: 0pt;  position: absolute; right: 0px; top: 0px;}
</style>


<body>부분을 아래처럼 바꿉니다. id가 따로 설정이 없으신 분들은 그냥 무시하시고 onload 부분만 추가하세요~^^

body 부분을 바꾸기.txt

 


<body id="본래 설정" onload="InitializeStaticMenu();">

그 <body id="본래" onload="InitializeStaticMenu();"> 바로 아랫부분에
아래 소스 넣어줍니다. 이제 원하는 것을 삽입하는 단계입니다.

body 아래에.txt

 


<div id="STATICMENU">
--사이드배너, 광고, 메뉴 소스 넣어줍니다--
</div>

그럼 이제 스크롤 따라 부드럽게 이동하는 사이드배너(메뉴)가 완성됩니다.


퀵메뉴, 사이드배너, 스크롤 메뉴, 공간메뉴 등으로 불리는..
일정하게 이름이 하나로 정해져있으면 소스 검색하기도 편리할텐데 말이죠ㅎㅎ
그럼, 유용하게 쓰시길 바랍니닷~!