스크롤을 따라다니는 레이어

티스토리 뷰

나는 프로그래머다!/Javascript

스크롤을 따라다니는 레이어

JinyGo 2012. 2. 9. 15:50

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

아래의 코드는,

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

<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">스크롤바를 
따라다니는 
레이어</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">1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
 
16
 
17
 
18
 
19
 
20
 
21
 
22
 
23
 
24
 
25
</td>
</tr>
</table>
</body>
</html>

TAG more

최근에 올라온 글

최근에 달린 댓글

글 보관함

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Total

Today

Yesterday

새로운 세상을 향하여!!

티스토리 뷰

스크롤을 따라다니는 레이어

티스토리툴바