중앙정렬시 퀵스크롤 위아래로 움직이는것 고정하는 법
홈페이지 중앙정렬일때 아래의 소스를 써서 해상도에 따라 지정한 위치에 고정되어있습니다.
이 소스는 위 아래로 따라다니거든요 (참고사이트처럼.. 왼쪽 문구)
위 아래로 따라다니는 걸 고정시키고 싶습니다.
소스를 어떡해수정해야하는지 부탁드려요~
참고사이트
왼쪽에 보시면 "베푸는 사랑 나누는 기쁨... 이 부분입니다.
이 부분이 세로로 안따라다니고 고정이 되었으면합니다.
스크롤소스
<SCRIPT LANGUAGE="JavaScript">
function CheckUIElements() {
var yMenu1From, yMenu1To, yOffset, timeoutNextCheck;
var wndWidth = parseInt(document.body.clientWidth);
yMenu1From = parseInt (qLayer.style.top, 10);
yMenu1To = document.body.scrollTop + 80; // 위쪽 위치
timeoutNextCheck = 500;
function CheckUIElements() {
var yMenu1From, yMenu1To, yOffset, timeoutNextCheck;
var wndWidth = parseInt(document.body.clientWidth);
yMenu1From = parseInt (qLayer.style.top, 10);
yMenu1To = document.body.scrollTop + 80; // 위쪽 위치
timeoutNextCheck = 500;
if ( yMenu1From != yMenu1To ) {
yOffset = Math.ceil( Math.abs( yMenu1To - yMenu1From ) / 20 );
if ( yMenu1To < yMenu1From )
yOffset = -yOffset;
yOffset = Math.ceil( Math.abs( yMenu1To - yMenu1From ) / 20 );
if ( yMenu1To < yMenu1From )
yOffset = -yOffset;
qLayer.style.top = parseInt (qLayer.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
qLayer.style.left = (document.body.clientWidth/2)-300; //중심으로 부터의 수평거리
}
qLayer.style.left = (document.body.clientWidth/2)-300; //중심으로 부터의 수평거리
setTimeout ("CheckUIElements()", timeoutNextCheck);
}
}
function MovePosition() {
var wndWidth = parseInt(document.body.clientWidth);
var wndWidth = parseInt(document.body.clientWidth);
// 페에지 로딩시 포지션
qLayer.style.top = 80;
qLayer.style.left = (document.body.clientWidth/2)+390; //중심으로 부터의 수평거리
qLayer.style.visibility = "visible";
qLayer.style.top = 80;
qLayer.style.left = (document.body.clientWidth/2)+390; //중심으로 부터의 수평거리
qLayer.style.visibility = "visible";
// initializing UI update timer
CheckUIElements();
return true;
}
</SCRIPT>
CheckUIElements();
return true;
}
</SCRIPT>
<!---- 레이어디자인부분 ------>
<div style="position:absolute; top:300px; left:expression( (document.body.clientWidth/2)+200);z-index:1; left: 200px;" id="qLayer" name="qLayer">
<table width='72' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td width="72" align='center'><? include"in_left_txt.php"; ?></td>
</tr>
</table>
</div>
<script language='JavaScript'>MovePosition();</script>
<div style="position:absolute; top:300px; left:expression( (document.body.clientWidth/2)+200);z-index:1; left: 200px;" id="qLayer" name="qLayer">
<table width='72' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td width="72" align='center'><? include"in_left_txt.php"; ?></td>
</tr>
</table>
</div>
<script language='JavaScript'>MovePosition();</script>
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 3개
경우에 따라서 레이어를 하나 더 감싸세요.
relative 현재 위치를 기준으로 포지션을 잡습니다.
absolute 브라우져의 가로 세로 0xp 기준에서 시작합니다.
그러나 같이 쓸경우 조금 달라집니다.
현재 위치에서 시작하는 것과 같은 효과를 얻을 실 수 있을 겁니다.
포지션은 top - ?px과 같이 하셔도 됩니다.
둘 중 하나의 포지션은 0과 0으로 하시고 잡아보세요.
<div style="position:relative; top:?px; left:?px; width:?px; height:?px; z-index:1;">
<div style="position:absolute; left:?px; top:?px; width:?; height:?px; z-index:1">
<table width='72' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td width="72" align='center'><? include"in_left_txt.php"; ?></td>
</tr>
</table>
</div>
</div>
근데 적용을 이러저리 해봤는데 스크립트 오류가 뜹니다 ㅡ.ㅡ;;
어떡해 설정을 해야할지도 햇갈리구요.ㅡ.ㅜ