본문으로 바로가기
homeimage
  1. Home
  2. IT·인터넷/블로그
  3. 스크롤 위치를 따라 다니는 레이어

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

· 댓글개 · 바다야크

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

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

웹 디자인 레이어
웹 디자인 레이어

소개해 드리는 코드는 웹에서 구한 여러 개의 코드를 참고하여 만들었습니다. 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">로 변경  하십시오.

소스 코드 :

scroll-layer.html
0.00MB

<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>

'IT·인터넷 > 블로그' 카테고리의 다른 글

Tistory의 아쉬운 답글 업그레이드  (13) 2009.03.26
웹디자이너가 존경스럽다.  (24) 2009.03.12
XpressEngine 1.1.0  (12) 2008.11.25
SNS 공유하기
💬 댓글 개
최근글
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.