스크롤 따라 움직이는 레이어

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

IE6, IE7, IE8, IE10, FF16.0.2, Opera12.02, Safari6.0.1에서 테스트 되었다. 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;
	var initTop = position;
	var bottomLimit = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) - btmLimit - obj.offsetHeight;
	var top = initTop;

	obj.style.position = 'absolute';

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

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

	function move() {
		if (initTop > 0) {
			pos = getTop() + initTop;
		} else {
			pos = getTop() + getHeight() + initTop;
		}

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

		interval = top - pos;
		top = top - interval / 3;
		obj.style.top = top + 'px';

		window.setTimeout(function () {
			move();
		}, 25);
	}

	function addEvent(obj, type, fn) {
		if (obj.addEventListener) {
			obj.addEventListener(type, fn, false);
		} else if (obj.attachEvent) {
			obj['e' + type + fn] = fn;
			obj[type + fn] = function() {
				obj['e' + type + fn](window.event);
			}
			obj.attachEvent('on' + type, obj[type + fn]);
		}
	}

	addEvent(window, 'load', function () {
		move();
	});
}
//]]>
</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)값이 양수이면 브라우저의 상단으로 부터의 거리, 음수이면 하단으로 부터의 거리로 계산이 된다. 상단 위치는 디자인 상의 이유로 객체의 상단 한계를 정할 때 유용하다. 하단 한계는 브라우저 창이 작을 때 스크롤이 한없이 내려가는 현상을 방지해 준다.

가운데 정렬

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

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