그곰의 생활

[스크렙]스크롤 따라 움직이는 레이어(퀵메뉴 스크립트) 본문

Client-side/SCRIPT

[스크렙]스크롤 따라 움직이는 레이어(퀵메뉴 스크립트)

그곰 2011. 7. 7. 11:24

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

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

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=euc-kr">
<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">
	WEB Site header
</div>
<div id="gotop">
	<a href="#head" title="Top">Top</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

저작자표시

'Client-side > SCRIPT' 카테고리의 다른 글

자바스크립트 Form 생성하여 Post 전송  (3) 2011.11.15
게시물 제목+URL SNS 링크 스크립트  (0) 2011.11.07
[스크랩] 비밀번호 유효성 검사  (0) 2011.10.06
[스크랩]영문, 숫자, 한글, 이메일 확인 스크립트  (0) 2011.07.25
[스크립트] 왼쪽 메뉴 지정 스크립트  (0) 2011.07.22
'Client-side/SCRIPT' Related Articles more
Comments