스크롤 위치를 따라 다니는 레이어

2009.03.13 00:16 IT·인터넷/블로그

웹디자이너가 존경스럽다.” 글에 언급했던 코드를 정리하여 올립니다. 요즘 쇼핑몰을 보면 페이지가 스크롤되도 화면의 특정 위치로 떠 다니는 레이어가 있습니다. 이런 레이어를 만드는 방법입니다.

소개해 드리는 코드는 웹에서 구한 여러 개의 코드를 참고하여 만들었습니다. java script 코딩 경험이 적어 어수룩한 부분이 있을 것입니다. 혹, 참고가 되고 도움이 되는 말씀을 주시면 감사하겠습니다. 

아래의 코드는,

  1. 웹 디자인을 폭 400px로 하고 항상 화면 가운데로 출력 한다고 가정하고 작성되었으며,
  2. 스크롤을 따라 움직이는 레이어는 웹 내용의 바로 오른쪽에 출력하도록 했습니다.
  3. 타이머 이벤트를 이용하여 스크롤의 위치로 레이어를 미끄러 지듯이 이동하도록 했으며,
  4. 역시 타이머를 이용하여 레이어와 스크롤의 위치를 확인하게 했습니다.
  5. 타이머 이벤트는 레이어를 이동할 때만 시간 간격을 빠르게 했으며,
  6. 마지막으로 이해를 돕기 위해 주석을 자세히 추가했습니다.

이 코드는 MS IE6, MS IE7, FireFox, Google Chrome 브라우저에서 정상적으로 실행되는 것을 확인했습니다. Google Chrome에서도 되는 것을 보면 대부분의 브라우저에서 실행된다고 생각됩니다.

도움을 부탁드립니다.

레이어를 옮길 때 미끄러지듯히 이동하는 것처럼 보이기 위해서 웹 검색으로 얻은 소스를 적용하려 했지만, 코드가 너무 복잡해서 이해하지를 못해 결국 사용하지 못하고, 대신 스크롤 위치까지 거리를 반씩 줄이는 방법을 적용했습니다. 되기는 되는데 인터파크처럼 부드럽지 못하네요. 혹시, 인터파크처럼 부드럽게 이동하는 방법을 알려 주시면 감사하겠습니다. ^^

주의 내용

주의하실 것은

  • java script가 </head> 전에 있어야 하며,
  • 레이어는 java script 보다 위에 작성되어야 에러가 발생하지 않습니다.
  • html 파일 처음에 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 행이 있다면 반드시 제거하십시오.
  • html 시작은 <html> 이나 <html xmlns="http://www.w3.org/1999/xhtml">로 변경  하십시오.

소스 코드

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>무제 문서</title>

<!-- *************따라다니는 레이어 코드 시작************* -->

<!-- 떠다니는 레이어 시작 --> <div id="ScrollMenu" style="position:absolute; left:614px; top:41px; width:108px; z-index:1;

height: 137px;"> <table width="100" height="129" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000"> <tr> <td align="center" valign="middle" bgcolor="#FFFFFF">스크롤바를<br> 따라다니는<br> 레이어</td> </tr> </table> </div> <!-- 떠다니는 레이어 종료 -->

<!-- 따라다니는 레이어 스크립트 종료 --> <script language=javascript> <!--

var yScrollThumb; var yMenuTop;

function CheckMenuPosition() { // 아래의 400은 웹페이지 구성이 화면 가운데 이고 폭이 400px일 때, // 페이지 내용 오른쪽에 레이어를 위치 yScrollThumb = 400 + (document.body.clientWidth-400) /2; if (yScrollThumb != ScrollMenu.style.left) { ScrollMenu.style.left = yScrollThumb; } // 레이어는 스크롤바를 내릴 때 항상 위에서 100px 밑에 위치 yScrollThumb = document.body.scrollTop +100; // 현재 메뉴의 위치를 10진수로 구한다. yMenuTop = parseInt ( ScrollMenu.style.top, 10);

if ( yMenuTop == yScrollThumb) {// 레이어를 이동하 필요가 없다면 다음 타이머는 조금 늦추어 발생 TimeOutInterval = 500; } else { // 레이어의 위치를 스크롤바의 썸브 위치로 이동한다. // 레이어의 위치를 스크롤바의 썸브 위치 사이의 중간 위치를 구한다. yMenuTop = ( yMenuTop + yScrollThumb) / 2; if ( 200 >= yMenuTop) { // 변경할 위치가 200보다 작다면 200으로 고정한다. // 즉, 화면 맨 위로 이동했다면 상단의 캡션부분을 넘지 못하게 ScrollMenu.style.top = 200; TimeOutInterval = 500; } else { // 레이어의 위치를 변경하고 다시 스크롤바의 썸브 위치로 // 레이어를 빠르게 이동 시키기 위해 // 다음 타이머 이벤트를 빨리 발생하게 한다. ScrollMenu.style.top = yMenuTop; TimeOutInterval = 10; } } setTimeout ("CheckMenuPosition()", TimeOutInterval); }

function OnLoad() { CheckMenuPosition(); return true; } OnLoad();

//--> </script> <!-- 따라다니는 레이어 스크립트 종료 -->

<!-- *************따라다니는 레이어 코드 종료************* --> </head>

<body> <table width="400" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#000000"> <tr> <td align="center" bgcolor="#FFFFFF"><p>1</p> <p>&nbsp;</p> <p>2</p> <p>&nbsp;</p> <p>3</p> <p>&nbsp;</p> <p>4</p> <p>&nbsp;</p> <p>5</p> <p>&nbsp;</p> <p>6</p> <p>&nbsp;</p> <p>7</p> <p>&nbsp;</p> <p>8</p> <p>&nbsp;</p> <p>9</p> <p>&nbsp;</p> <p>10</p> <p>&nbsp;</p> <p>11</p> <p>&nbsp;</p> <p>12</p> <p>&nbsp;</p> <p>13</p> <p>&nbsp;</p> <p>14</p> <p>&nbsp;</p> <p>15</p> <p>&nbsp;</p> <p>16</p> <p>&nbsp;</p> <p>17</p> <p>&nbsp;</p> <p>18</p> <p>&nbsp;</p> <p>19</p> <p>&nbsp;</p> <p>20</p> <p>&nbsp;</p> <p>21</p> <p>&nbsp;</p> <p>22</p> <p>&nbsp;</p> <p>23</p> <p>&nbsp;</p> <p>24</p> <p>&nbsp;</p> <p>25</p> </td> </tr> </table> </body> </html>

 

이 댓글을 비밀 댓글로
  1. 이건 심하게 신기하군요..
    옛날에 홈페이지를 끄적인적이 있었는데..
    이런 소스는 보지못했는데..
    대단하십니다 T.T..
    조금만 일찍 알았더라면 좋았으려만 ^^;;...
    • 대단하기는요. 웹 검새에 의지해서 짜집기한 것 뿐입니다.
      재밌게 봐 주셔서 감사합니다. ^^
  2. script에는 language보다는 type이 더 괜찮을텐데.....요.....;;
  3. 하....이제 저도 웹사이트를 업뎃 해볼려던 참에 좋은 소스정보를 여기서 얻네요.혹시드림위버에서 바로 하면 되는거죠??ㅎ

    감사...항상.

    ps> jw 1년된 유저고 첫 댓글입니다. 제품디자이너며, 좋은것들 여기서 많이 보고 jw에서 도움받습니다. 요즘 리서치 프로세스나 브레인스토밍은 jw-thinkwise(or mindmap)- Onenote로 구성해서 하고있습니다.
    • 나루터~
    • 2009.03.13 08:17 신고
    감사합니다~
    동호회 홈피에 적용 시켜봐야것내요
  4. 오 좋은정보군요 ㅎㅎ 감사합니다 나중에 써먹도록 일단 즐겨찾기를..;;;
    • aperire
    • 2009.03.13 09:13 신고
    ss베너군요
    (스카이스크렙터, 혹은 엘리베이터 등등 이라고 합니다.
    모 국내사이트에서만 자주 사용합니다. 일본어사이트에 넣었봤는데 빼 달라고 하더군요)
  5. http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm

    링크 참고 해보세요.
    • 이런...파이어팍스와 크롬에서는 되는데 MS의 IE에서는 안 되는군요.
      MS의 IE는 왜 그 모양인지 모르겠습니다.
      대신에 부드럽게 움직이게하는 부분을 분석하여 참고하겠습니다.
      알려 주셔서 감사합니다. ^^
      • dmasi
      • 2009.03.18 22:46 신고
      되는데요?
      ie설정이 뭔가 문제가 있으신 듯 합니다.
  6. 고무줄 물리 엔진 적용하면 레이어가 부들부들 떨겠군요.
  7. 좋은 소스 감사합니다...^^
    메뉴 스크롤소스가.. 브라우저별로 호환이 잘 안되서 고심하던차에..
    이런 좋은 소스를 발견하도고 적용을 못했는데...;;
    문제점이..ㅋㅋ 스크립트 하단에 div를 삽입해서 그런것였네요 ㅋㅋ
    이 블로그를 알게 된지 며칠 되ㅘㅇ팬의지 않았고... 또 브라우저는 오늘 쓰기 시작했는데..
    광팬이 될 조짐이 보입니다...ㅎ
    내년 초 군대 가기 전까지는 종종 들르겠습니다^^! 좋은하루보내십시요!!
    • 사용자
    • 2009.10.08 06:53 신고
    스크립트 말고, position:fixed로 간단하게 구현이 가능하지요..
    • koc/SALM
    • 2010.02.12 10:26 신고
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 행을 지운다고요? 별로 좋은 생각이 아닙니다.
    저 행을 지운다면 더 이상 정상적인 XHTML 코드가 아닙니다. 어떤 사람이 어떤 이유로 저것을 지우라고 가르쳐주었는지는 모르겠으나, 매우 불합리한 생각입니다.
    엔진 출력이 낮아지고 몇몇 장치가 오작동을 보인다고 공기 정화 필터를 뗀 자동차를 운전하시나요? (과거에는 실제로 공기 정화 필터 때문에 엔진 출력이 낮아지고, 몇몇 장치가 오작동했습니다.) 설마 그러시지는 않겠지요?
    마찬가지입니다. 마크업 랭기지의 렌더링이 나쁘고, 브라우저마다 렌더링 결과가 달라진다고 저 부분을 삭제해 버리면 더 이상 (X)HTML 코드가 아니게 됩니다. 저 부분을 삭제해도 렌더링이 문제없이 되는 이유는 각 브라우저에서 각 브라우저의 하위 호환성을 유지하기 때문이지 마크업 랭기지가 하위 호환성을 가지기 때문이 아닙니다. 그 둘을 혼동하게 되면 저 부분을 삭제하라는 말을 하게 되지요.
    참고로 !DOCTYPE 선언이 없는 문서를 플레인 텍스트(일반 텍스트)로 보여 주어도 웹브라우저의 잘못이 아닙니다. 법을 잘 지키는 사람의 행동을 잘못이라고 말할 수 없듯이 표준을 잘 지킨 웹브라우저의 렌더링 결과를 잘못이라고 말할 수 없습니다.
    • 그렇군요. 그런 깊은 뜻이 있었네요. 말씀과 같이 지킬 것은 지켜야 앞으로도 편안해 지겠지요. 말씀 감사합니다. ^^
  8. 앗~ 트위터에서만 뵙다가 이렇게 블로그에서 뵈니 또 반갑네요. @youthinking 입니다. 떠다니는 메뉴 다른 방법들 좀 알아보다가 들렀습니다. 규약을 지키면서 할 수 있는 방법은 아직 못찾으셨나 보네요. 근데 포스팅 하단에 정리하신 추천과 구독들이 참 깔끔한 것 같아요~ 방법 정리하신 포스팅 있나요?
  9. 이게 티스토리에서 적용이 되나요?
  10. 저 티스토리에 부드럽게 굴러가는 스크롤을 적용시켯는데
    몇번의 시행착오 끝에
    성공했어요!!
    http://whpcs.co.cc
    들어가시면 왼쪽에 스크롤 굴러가는거 나와요
    단점이라면....
    왼쪽 사이드바 메뉴를 다가린다랄까??
  11. 와~ 직접 소스를 만들수 있으시다는게 참 부럽습니다.
    저는 이번에 회사 쇼핑몰(같은)것을 만들고 있는데 해당 소스를 적용시켜서 쓸 수 있는지 궁금합니다..^^
    물론 다른 소스도 찾아 봤는데 jqeury어쩌구 하는데.. 다들 조금씩 원하는것들과 틀려서 여쭤봅니다.