[JS] Scroll Layer : 신현석

페이지 스크롤에 따라서 부드럽게 움직이는 레이어를 만드는 스크립트이다. 쇼핑몰이나 웹사이트에서 사이트 오른쪽에 스크롤을 따라다니는 탑버튼이나 퀵메뉴, 윙배너 구현에 사용할 수 있다.

IE6, IE7, IE8, FF3.6, Opera10.50, Safari4에서 테스트 되었다. IE의 쿽스모드와 표준모드 양쪽에서 작동한다.

코드

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SmoothMovingLayer Demo</title>
<script type="text/javascript">
//<![CDATA[
function initMoving(target, position, topLimit, btmLimit) {
 if (!target)
  return false;

 var obj = target;
 obj.initTop = position;
 obj.topLimit = topLimit;
 obj.bottomLimit = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) - btmLimit - obj.offsetHeight;

 obj.style.position = "absolute";
 obj.top = obj.initTop;
 obj.left = obj.initLeft;

 if (typeof(window.pageYOffset) == "number") { //WebKit
  obj.getTop = function() {
   return window.pageYOffset;
  }
 } else if (typeof(document.documentElement.scrollTop) == "number") {
  obj.getTop = function() {
   return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  }
 } else {
  obj.getTop = function() {
   return 0;
  }
 }

 if (self.innerHeight) { //WebKit
  obj.getHeight = function() {
   return self.innerHeight;
  }
 } else if(document.documentElement.clientHeight) {
  obj.getHeight = function() {
   return document.documentElement.clientHeight;
  }
 } else {
  obj.getHeight = function() {
   return 500;
  }
 }

 obj.move = setInterval(function() {
  if (obj.initTop > 0) {
   pos = obj.getTop() + obj.initTop;
  } else {
   pos = obj.getTop() + obj.getHeight() + obj.initTop;
   //pos = obj.getTop() + obj.getHeight() / 2 - 15;
  }

  if (pos > obj.bottomLimit)
   pos = obj.bottomLimit;
  if (pos < obj.topLimit)
   pos = obj.topLimit;

  interval = obj.top - pos;
  obj.top = obj.top - interval / 3;
  obj.style.top = obj.top + "px";
 }, 30)
}
//]]>
</script>
<style type="text/css">
body {
 margin: 0;
}
#head {
 width: 800px;
 height: 3000px;
 background: #eee;
}
#gotop {
 position: absolute;
 left: 810px;
 top: 50px;
 background: #ddd;
 width: 100px;
 height: 1000px;
}
</style>
</head>
<body>
<div id="head">
 웹사이트 헤더
</div>
<div id="gotop">
 <a href="#head" title="상단으로">위로</a>
</div>
<script type="text/javascript">initMoving(document.getElementById("gotop"), 50, 50, 50);</script>
</body> 
</html>

사용법

initMoving(움직일 대상, 스크롤위치, 상단 한계, 하단 한계);

움직일 대상은 HTML 오브젝트로 지정한다. 스크롤위치는 오브젝트가 스크롤을 따라서 고정될 브라우저 창 위 경계로부터의 위치이다. 상단 한계는 웹 페이지에서 오브젝트가 올라갈 수 있는 한계 위치이다. 하단 한계는 웹 페이지에서 오브젝트가 내려갈 수 있는 한계 위치이다.

스크롤위치(position)값이 양수이면 브라우저의 상단으로 부터의 거리, 음수이면 하단으로 부터의 거리로 계산이 된다. 상단 위치는 디자인 상의 이유로 오브젝트의 상단 한계를 정할 때 유용하다. 하단 한계는 브라우저 창이 작을 때 오브젝트가 한없이 내려가는 현상을 방지해 준다.

페이지에 이미지가 많아서 오브젝트가 페이지 끝까지 잘 내려가지 않을 경우 initMoving을 load 이벤트에서 적용하면 된다.

가운데 정렬

사이트 레이아웃이 중앙 정렬일 경우에는 아래의 방법으로 레이어의 위치를 레이아웃에 맞게 지정할 수 있다.

position 사용 방법

CSS position을 이용해서 중앙 정렬 하는 방법을 사용해서 레이어를 위치시킨다.

#gotop {
 position: absolute;
 left: 50%;
 top: 50px;
 margin-left: 410px;    /* 레이아웃 너비의 절반 + 여백 */
 background: #ddd;
 width: 100px;
 height: 1000px;
}

단, 이 방법은 브라우저의 화면이 레이아웃 영역보다 작아질 경우 문제가 있다. #gotop이 화면 영역을 기준으로 정렬이 되기 때문에 레이아웃 영역안으로 침범하게 된다.

body 요소를 가운데 정렬하는 방법

body 요소를 margin 속성으로 중앙 정렬하고 relative position을 지정한다.

body {
 margin: 0 auto;
 width: 930px;
 position: relative;
}

이 방법은 브라우저가 표준모드를 사용할 때에만 작동한다. 또한 IE6에서 호환성 문제가 발생할 수 있기 때문에 주의해야 한다.

참고링크

W3C DOM Compatibility - CSS Object Model View

출처 - http://hyeonseok.com/pmwiki/index.php/Javascript/SmoothMovingLayer

이 블로그 검색

끄적대기