스크롤 따라 움직이는 레이어
페이지 스크롤에 따라서 부드럽게 움직이는 레이어를 만드는 스크립트이다. 쇼핑몰이나 웹사이트에서 사이트 오른쪽에 스크롤을 따라다니는 탑버튼이나 퀵메뉴, 윙배너 구현에 사용할 수 있다.
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에서 호환성 문제가 발생할 수 있기 때문에 주의해야 한다.