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

*스크롤 따라다니는 경우는 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>

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


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

신고

Comments

  1. 이전 댓글 더보기
  2. 코딩을배우겠어요 2013.02.13 14:51 신고

    우선 정말 좋은정보 감사해요! 너무도 유용하게 썼습니다.

    그런데 스크롤시 브라우져 하단과 퀵메뉴와의 간격을 조절할 수는 없나요??

    스크롤 내리니까 퀵메뉴가 계속 내려가서요 ㅠ.ㅜ

    perm. |  mod/del. |  reply.
  3. 나무 2013.04.05 10:54 신고

    감사합니다 ㅠㅠ!! 찾던 소스인데 적용하니깐 잘되네요!! 복받으세요~

    perm. |  mod/del. |  reply.
  4. 2013.11.21 15:00

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  5. 감사합니다 2013.12.08 06:20 신고

    정말 감사합니다
    잘쓰겠습니다

    perm. |  mod/del. |  reply.
  6. BlogIcon 암굴왕 2014.02.28 11:46 신고

    잘 쓸게요. 감사합니다.

    perm. |  mod/del. |  reply.
  7. 2014.04.03 13:40

    비밀댓글입니다

    perm. |  mod/del. |  reply.
  8. BlogIcon 난아 2014.06.23 21:46 신고

    // left로 바꿔도.. 라고 되어있는 부분에서 center 로 바꾸면 가운데를 기준으로 왼쪽으로 이동하네요 ㅎㅎ
    그기능이 필요했는데, 덕분에 매우 예쁜 홈을 만들었습니다.
    정보 감사해요!

    perm. |  mod/del. |  reply.
  9. BlogIcon 하루와 2014.07.29 19:55 신고

    약간 부족한 면이 있지만서도
    전보다는 확실히 이쁘게 됐어요 ㅋㅋ
    감사합니다.
    소스부분이 공개되는 게시가 있어요
    출처 표기 하겠습니다.

    perm. |  mod/del. |  reply.
  10. 도너츠 2015.01.21 16:57 신고

    와... 홈페이지 만드는데 꼭 필요한 소스였는데 덕분에 해결됐습니다.
    정말 감사합니다. 새콤달콤이라도 드리고싶네요.
    정말감사합니다... 와....대박..

    perm. |  mod/del. |  reply.
  11. 은죠 2015.04.24 12:08 신고

    정말 부드럽게 잘 적용이 되네요^^
    도움 주셔서 감사합니다.
    혹시 세로로 적용하려면 어떻게 해야하는지..ㅠㅠ 알수있을까요??

    perm. |  mod/del. |  reply.
  12. BlogIcon 앱작가 2015.05.25 21:57 신고

    감사합니다 ㅠㅠ

    다른 곳에서 돌아다는 것은 웹표준으로 하면 안 되고 쿼크에서만 되더라구요 ㅠ

    이건 표준에서도 잘 돌아갑니다 !

    perm. |  mod/del. |  reply.
  13. 지나가는개발자 2015.06.30 15:58 신고

    이런글 잘 안남기는데
    도움이 되서 인사 남깁니다.
    정말 감사합니다~~~!!! ^^

    perm. |  mod/del. |  reply.
  14. 지나가던 개발자 2015.07.03 12:04 신고

    감사합니다 ㅋㅋ 저도 두번째꺼 덕분에 성공했어요~~ 다만 소스확인해보니 순수 javascript만 사용한 소스인데.. 밑에 JQuery사용 했다는 말은 빼면 어떨까용??

    perm. |  mod/del. |  reply.
  15. java안녕? 2015.08.10 06:45 신고

    두번째거 적용이 되어서 너무 잘 썼습니다.
    그런데 아래로 계속 내려가는것을 잡는 방법좀 알려 주시면 정말 감사하겠습니다.

    perm. |  mod/del. |  reply.
  16. 나그네 2015.12.24 13:13 신고

    제이쿼리 없이 자바스크립트로 구현 굿굿

    perm. |  mod/del. |  reply.
  17. 내새꾸 2016.02.11 13:09 신고

    부드럽게 움직이고 화면 상단에 머무르는 배너를 찾고 있었는데 딱이네요~!
    고맙습니다~

    perm. |  mod/del. |  reply.
  18. jeon 2016.03.15 10:34 신고

    코드에 코자도 모르는 생초보가 이 글에 도움을 많이 받았습니다!
    너무 늦게 여쭤봐서 죄송한데 혹시 위에서 아래로 따라오지 않고 왼쪽에서 오른쪽으로 따라올땐 어떻게 바꿔야하는지 알려주실수 있으신가요?
    제 스크롤이 왼쪽에서 오른쪽으로 가는 모양새라 ..

    perm. |  mod/del. |  reply.
  19. BlogIcon 강모시 2016.03.26 02:17 신고

    와우 잘 사용하겠습니다!

    perm. |  mod/del. |  reply.
  20. 나에여 2016.08.12 16:18 신고

    2번째 적용후 !doctype html 을 사용하면 되지않는데 저만그런가요..

    perm. |  mod/del. |  reply.
  21. 멍뭉무 2016.11.07 10:31 신고

    좋은정보감사합니다!

    perm. |  mod/del. |  reply.

What's on your mind?

댓글 입력 폼



티스토리 툴바