본문 바로가기
코딩

센터정렬 페이지에서 고정되는 퀵메뉴소스, 따라다니는 배너

by Euntori 2012. 7. 2.
반응형

웹서핑을 하다보면 스크롤을 움직여도 따라다니는 배너나 메뉴를 많이 보셨을 겁니다. 퀵메뉴소스는 홈페이지에서 많이 쓰이는데요. 스크롤을 따라 내려가기 때문에 광고용 배너에도 많이 쓰이고 있습니다. 홈페이지를 만들다가 퀵메뉴를 넣었는데, div코딩이 아니고 테이블로 코딩하다보니 상대값을 입력하는 소스가 많이 없고 잘 안되고 막히더라구요..ㅜ 보통 창의 맨 왼쪽위부터 계산해서 위치를 잡기때문에 인터넷창을 줄이고 작게보면 퀵메뉴의 위치가 움직이는 문제가 발생합니다. 그래서 엄청나게 검색하다가 결국 잘먹히는 소스를 찾아서 공유합니다.^_^ 홈페이지가 가운데정렬이더라도 퀵메뉴가 항상 고정되는 상대값 소스입니다.^^ footer파일 안에 복사해서 사용하셔도되고, 퀵메뉴를 따로 불러오시는거라면 맨 아래쪽에 테이블을 삭제해주시면 됩니다. 기본적으로는 굵은글씨부분을 알맞게 수정해서 사용하시면 문제없이 잘 되실거예요^^

 

 

버튼을 눌러주시면 좀 더 많은 분들이 이 글을 볼 수 있습니다.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">
#gotop{
left:50%;
margin-left:400px;     <!--이부분은 화면 가운데라인에서부터의 px을 정해줍니다. 이부분이 상대값을 만들어주는 중요한 부분입니다.-->
background: transparent;
width:100px;
height:200px;
}
body{
margin:0;
padding:0;
}
</style>
<script>
function initMoving(target, position, topLimit, btmLimit) {
if (!target)
return false;

var obj = target;
obj.initTop = position;
obj.topLimit = topLimit;
obj.bottomLimit = document.documentElement.scrollHeight - btmLimit;

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

if (typeof(window.pageYOffset) == "number") {
obj.getTop = function() {
return window.pageYOffset;
}
} else if (typeof(document.documentElement.scrollTop) == "number") {
obj.getTop = function() {
return document.documentElement.scrollTop;
}
} else {
obj.getTop = function() {
return 0;
}
}

if (self.innerHeight) {
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>
</head>
<body>
<table height="100" bgcolor="black" width="800" align="center" cellspacing="0" cellpadding="0">
<tr>
<td>이곳이 footer의 내용이 들어가는곳입니다.</td>
</tr>
</table>
<div id="gotop">

퀵메뉴내용이 들어갑니다.</div>
<!-- 타겟, 포지션(상단으로부터 얼만큼 떨어졌는지 높이값을 정해줍니다.) , 탑리미트 , 보툼 리미트 -->
<script type="text/javascript">initMoving(document.getElementById("gotop"),150,50, 500); </script>

</body>
</html>

 

 

 

 

[출처] 퀵메뉴,가운데정렬사이트퀵메뉴 (칼라로마) |작성자 킹마야

반응형
저작자표시 비영리 동일조건

'코딩' 카테고리의 다른 글

카테고리 선택박스 소스, 멀티플 셀렉트박스  (0) 2012.10.24
모바일홈페이지에서 이미지에 전화연결 링크  (1) 2012.09.05
게시판 파일찾기 박스, 입력박스 세로스크롤자동  (0) 2012.08.16
고정이미지 서서히 바뀌는 소스  (1) 2012.07.19
새창 팝업형식으로 띄우는 자바스크립트  (0) 2012.07.10

관련글

댓글

티스토리툴바