묻고답하기
[질문및 요청입니다.] 스크롤바를 따라다니는 메뉴...
2004.04.22 02:17
스크롤바의 움직임에 따라 부드럽게 따라다니는 배너제작에 관한 질문입니다.
스터디 자료실에 있는 소스를 써봤는데요..... 제대로 되지 않아서 이렇게 질문및 요청글을 남깁니다..
다름이 아니라... 홈페이지를 중앙정렬로 제작을 하고 있습니다.
그런데...이곳저곳에서 여러가지 소스를 다운 받아서 사용해봤는데....
완벽하게 레이어의 위치가 고정이 되질 않는군요..ㅠㅠ
브라우저의 크기변경,모니터해상도의 변경에 따라서 위치가 달라져 버리네요...ㅠㅠ
적용은 되는데..중요한 위치가 고정이 안되서 난감한 상태입니다.
자료실에 스티치 님이 올려주신 자료로 해봤는데요.....창을 작게 줄이니까 역시 위치가 변하더군요...
고수님들의 답변 부탁드리겠습니다..^^
아래것을 <body></body>안에 넣어주시구요---------------------------------->
<style type="text/css">
<!--
#watermark {position:absolute}
-->
</style>
===========================================================
<body></body>안에 스크롤바를 따라다니게할 부분을 <div>태그로 감싸줍니다.---------------------------------->
<div id="waterMark" style="z-index:10">내용</div>
===========================================================
</body>바로앞(본문의 맨 끝)에 아래 소스를 넣습니다.---------------------------------->
<script language="JavaScript1.2">
<!--
markW = 62;
markH = 47;
markX = 100;
markY = 100;
markRefresh = 10;
if (!document.all) document.all = document;
if (!document.all.waterMark.style) document.all.waterMark.style = document.all.waterMark;
wMark = document.all.waterMark.style;
wMark.width = markW;
wMark.height = markH;
navDOM = window.innerHeight;
function setVals() {
barW = 0;
barH = 0;
if (navDOM) {
if (document.height > innerHeight) barW = 20;
if (document.width > innerWidth) barH = 20;
} else {
innerWidth = document.body.clientWidth;
innerHeight = document.body.clientHeight;
}
posX = ((innerWidth - markW)-barW) * (markX/100);
posY = ((innerHeight - markH)-barH) * (markY/100);
}
function wRefresh() {
wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft);
wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop);
}
function markMe() {
setVals();
window.onresize=setVals;
markID = setInterval ("wRefresh()",markRefresh);
}
window.onload=markMe;
//-->
</script>
===========================================================
markW = 62; 에서 62 는 레이어의 폭
markH = 47; 에서 47 은 레이어의 높이
markX = 100; 에서 100 은 레이어의 X축 좌표 (퍼센트값입니다. 따라서 가로 100%를 의미하므로 오른쪽 끝)
markY = 100; 에서 100 은 레이어의 Y축 좌표 (퍼센트값입니다. 따라서 세로 100%를 의미하므로 맨 아래)
===========================================================
kissofgod.net에서 퍼왔습니다.. :)