웹마스터 팁
원하는 위치에서 스크롤바를 부드럽게 따라다님
2002.08.20 15:18
예제: http://yoonmi.net/study/study61.htm
------------- 관련 알기
○ left:600; top:50: 위치 조절해주세요. 왼쪽에서 얼마큼 떨어졌다 위에서 얼마큼 떨어졌다는 의미합니다.
○ table width="150" height="400" border="1" bgColor=gold: 테이블 크기를 조정해주세요, 원하는 걸루요^-------^* 많이 꾸며두 주시고..
------------------------------------------
<body> 와 </body> 사이에 입력 하세요.
-------------------------------------------
<div id=divMenu style="position:absolute; left:600; top:50">
<!-- 여기에서 배너의 위치와 크기를 설정 하세요-->
<table width="150" height="400" border="1" bgColor=gold>
<tr>
<td>******* 여기다가 원하는 글이나 그림을 넣으세요 *************</td>
</tr>
</table>
</div>
<script language=javascript>
<!--
var bNetscape4plus = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "4");
var bExplorer4plus = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substring(0,1) >= "4");
function CheckUIElements(){
var yMenuFrom, yMenuTo, yButtonFrom, yButtonTo, yOffset, timeoutNextCheck;
if ( bNetscape4plus ) {
yMenuFrom = document["divMenu"].top;
yMenuTo = top.pageYOffset + 62;
}
else if ( bExplorer4plus ) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = document.body.scrollTop + 59;
}
timeoutNextCheck = 500;
if ( Math.abs (yButtonFrom - (yMenuTo + 152)) < 6 && yButtonTo < yButtonFrom ) {
setTimeout ("CheckUIElements()", timeoutNextCheck);
return;
}
if ( yButtonFrom != yButtonTo ) {
yOffset = Math.ceil( Math.abs( yButtonTo - yButtonFrom ) / 10 );
if ( yButtonTo < yButtonFrom )
yOffset = -yOffset;
if ( bNetscape4plus )
document["divLinkButton"].top += yOffset;
else if ( bExplorer4plus )
divLinkButton.style.top = parseInt (divLinkButton.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
if ( yMenuFrom != yMenuTo ) {
yOffset = Math.ceil( Math.abs( yMenuTo - yMenuFrom ) / 20 );
if ( yMenuTo < yMenuFrom )
yOffset = -yOffset;
if ( bNetscape4plus )
document["divMenu"].top += yOffset;
else if ( bExplorer4plus )
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ("CheckUIElements()", timeoutNextCheck);
}
function OnLoad()
{
var y;
if ( top.frames.length )
if ( bNetscape4plus ) {
document["divMenu"].top = top.pageYOffset + 135;
document["divMenu"].visibility = "visible";
}
else if ( bExplorer4plus ) {
divMenu.style.top = document.body.scrollTop + 135;
divMenu.style.visibility = "visible";
}
CheckUIElements();
return true;
}
OnLoad();
//-->
</script>
출처는 http://yazava.com 입니다.
------------- 관련 알기
○ left:600; top:50: 위치 조절해주세요. 왼쪽에서 얼마큼 떨어졌다 위에서 얼마큼 떨어졌다는 의미합니다.
○ table width="150" height="400" border="1" bgColor=gold: 테이블 크기를 조정해주세요, 원하는 걸루요^-------^* 많이 꾸며두 주시고..
------------------------------------------
<body> 와 </body> 사이에 입력 하세요.
-------------------------------------------
<div id=divMenu style="position:absolute; left:600; top:50">
<!-- 여기에서 배너의 위치와 크기를 설정 하세요-->
<table width="150" height="400" border="1" bgColor=gold>
<tr>
<td>******* 여기다가 원하는 글이나 그림을 넣으세요 *************</td>
</tr>
</table>
</div>
<script language=javascript>
<!--
var bNetscape4plus = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "4");
var bExplorer4plus = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substring(0,1) >= "4");
function CheckUIElements(){
var yMenuFrom, yMenuTo, yButtonFrom, yButtonTo, yOffset, timeoutNextCheck;
if ( bNetscape4plus ) {
yMenuFrom = document["divMenu"].top;
yMenuTo = top.pageYOffset + 62;
}
else if ( bExplorer4plus ) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = document.body.scrollTop + 59;
}
timeoutNextCheck = 500;
if ( Math.abs (yButtonFrom - (yMenuTo + 152)) < 6 && yButtonTo < yButtonFrom ) {
setTimeout ("CheckUIElements()", timeoutNextCheck);
return;
}
if ( yButtonFrom != yButtonTo ) {
yOffset = Math.ceil( Math.abs( yButtonTo - yButtonFrom ) / 10 );
if ( yButtonTo < yButtonFrom )
yOffset = -yOffset;
if ( bNetscape4plus )
document["divLinkButton"].top += yOffset;
else if ( bExplorer4plus )
divLinkButton.style.top = parseInt (divLinkButton.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
if ( yMenuFrom != yMenuTo ) {
yOffset = Math.ceil( Math.abs( yMenuTo - yMenuFrom ) / 20 );
if ( yMenuTo < yMenuFrom )
yOffset = -yOffset;
if ( bNetscape4plus )
document["divMenu"].top += yOffset;
else if ( bExplorer4plus )
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ("CheckUIElements()", timeoutNextCheck);
}
function OnLoad()
{
var y;
if ( top.frames.length )
if ( bNetscape4plus ) {
document["divMenu"].top = top.pageYOffset + 135;
document["divMenu"].visibility = "visible";
}
else if ( bExplorer4plus ) {
divMenu.style.top = document.body.scrollTop + 135;
divMenu.style.visibility = "visible";
}
CheckUIElements();
return true;
}
OnLoad();
//-->
</script>
출처는 http://yazava.com 입니다.
댓글 10
-
Xung[썽:]
2002.08.20 16:15
-
주여리
2002.08.20 16:22
가로*세로 이런식으로 위치를 잡게될것입니다.
넷플가보시면 왼쪽 메뉴를 이런식으로 해 놓은것을 볼수 있습니다.
왼쪽으로 잡아주면 모든 PC에서 동일하게 보이게 만들기 편합니다. -
지니하자
2002.08.20 19:45
가운데정렬이라면은 표를 기준으로 하여서 만들면 됩니다 -
권예용
2002.08.21 13:08
윤미님 방가워요~~~ 윤미님 강좌를 많이 이용하는 사람이에요
엠파스에선가 찾아서 즐겨찾기에 추가해놓구 제가 얻고싶은 소스많이 받아가요~
나모 매니아죠(할줄아는건 이것뿐임) ㅋㅎㅎㅎ 더욱 좋은 강좌 많아지길 바랄께요
요즘 윤미님 강좌로 아버지 사이트 만들고있는데요 완성하려면
아직 많이 머렀구요 언제 함 들려서 조언해주세요
http://www.aquan.com
안녕~ -
이파의 나무
2002.08.21 22:55
left:600; top:50: 이렇게 말구
right:600; top:50: 이렇게 하면 오른쪽으로부터 어느정도 떨어진 곳에 위치시킬지 정할 수 있습니다.^^ -
♬~레키~♬
2002.08.22 14:57
어랏 이거 나모에서 한번 해봣는데..
이거 js는 필요없는 또다른 거네요... 오호.... 좋은 강좌 감사합니다. -
윤명철
2002.08.25 22:22
윤미님.!
left 위치는 변하지만 top위치는 변하지가 않는군요.ㅠ.ㅠ
nzeo 처럼 top 위치를 딱. 고정하고 싶어요...
.....
top 240을 주면 240위치에서 50위치로 그냥 올라와 버려요...;;
부탁 -
쫑아~*
2002.09.12 00:07
예제...페이지를 찾을수 없다는데요^ ^;; -
孔子曰™
2002.10.11 22:52
상대는 absolute->relative 로 바꾸면 됩니다. 나모에선 자동으로 p태그로 바뀌니 나모에서 상대위치를 쓰시려면 div대신 p를 쓰시구, 페이지의 맨 마지막에 넣어주세요~ -
러빙유
2007.01.31 13:15
else if ( bExplorer4plus ) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = document.body.scrollTop + 59;
}
소스에서 저 부분에서 '59'를 원하는 수치로 고치니까 top 위치도 원하는 곳으로 이동하네요.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 웹호스팅 서버세팅 쉽게하기 팁[윈도우 메모장 이용] [3] | 김영남 | 2002.05.14 |
| 텔넷에서 다른 계정사용자의 홈디렉토리 접근 막기 [4] | 김영남 | 2002.05.11 |
| Redhat 7.3 나왔습니다. [20] | 야쿠자 | 2002.05.10 |
| [알아서 나쁠것없는 10원짜리 팁!] 수십 수백명사용자의 일괄생성 방법! [6] | 임현 | 2002.05.09 |
Redhat7.2에서 apache,mysql,php,zend,gd,freetype,giflib,jpeglib,zlib 설치하기
[14]
 | DeX™ | 2002.05.04 |
| 개인서버구동시 서버커널 메모리로....(렉생기시는분들 강추) [2] | 홈1004 | 2002.05.03 |
| DB 디자인 툴 소개 [2] | 석이 | 2002.04.21 |
| Apache2.0.35 + php4.3.0-devel 설치하기;; [15] | Cksoft | 2002.04.08 |
| [mysql을 하자 3] DB서버 원격 사용자,DB 만들어 사용하기 [5] | 비바람 | 2002.03.13 |
| [mysql을 하자 2] (pai님도 하신^^)사용자와 db를 맹글자 [4] | 비바람 | 2002.03.13 |
| [mysql을 하자 1] mysql 종료와 재부팅 | 비바람 | 2002.03.13 |
| MySQL 사용자 계정주기 [10] | pai | 2002.03.12 |
| 리눅스 아주 간단한 사용자 계정 주기-_- [7] | i- | 2002.03.12 |
| 아래 pai님 도메인셋팅 강좌 세부파일들 예제 :) [3] | 아르체 | 2002.03.06 |
| 근사모의 APM_steup3설치 법 [5] | 뽀유★ | 2002.03.01 |
| 리눅스서버 : 도메인 가진 사용자 추가하기 (텔넷,FTP,이메일 사용) [5] | pai | 2002.02.27 |
| 전자우편만 사용할수 있는 계정추가하기 [1] | pai | 2002.02.25 |
| 아파치 가상 유저 설정하기 [6] | i- | 2002.02.24 |
| 네임서버 설정 [15] | 쇠물택 | 2002.02.24 |
| 리눅스 시스템에서 시간 맞추기 [2] | 쇠물택 | 2002.02.24 |
제 화면에는 화면 가운데 보이는데.
1600*1200