JavaScript 퀵메뉴 스크립트 소스 <방법 2> IE6 , IE7 , FF2 , FF3 정상작동
페이지 정보
본문
IE6x , IE7x , FF 2x 에서 정상작동
<div id="floater2" style="position:absolute;z-index:5;">
내용
</div>
<script type="text/jscript">
<!--
// 스크립트는 반드시 스크롤될 내용 아래쪽에 넣습니다. 안그럼 오류가 발생합니다.
// 스크롤바 따라다니는 메뉴
var stmnLEFT = 21; // 스크롤메뉴의 좌측 위치
var stmnGAP1 = 112; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 50; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 68; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 2; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 1; // 스크롤되는 속도 (클수록 늦게 움직임)
var stmnTimer;
function RefreshStaticMenu() {
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(floater2.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
stmnRefreshTimer = stmnActivateSpeed;
if ( stmnStartPoint != stmnEndPoint ) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
floater2.style.top = parseInt(floater2.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}
function InitializeStaticMenu() {
floater2.style.top = document.body.scrollTop + stmnBASE;
RefreshStaticMenu();
floater2.style.left = stmnLEFT;
}
//-->
</script>
<script type="text/jscript">InitializeStaticMenu();</script>
2013-09-02 추가
문서에 DocType 선언된 경우 스크롤 작동하지 않습니다.
예를 들면 아래와 같은 선언
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
참고사이트
http://blog.naver.com/kimsukhoon24/120044781218
<div id="floater2" style="position:absolute;z-index:5;">
내용
</div>
<script type="text/jscript">
<!--
// 스크립트는 반드시 스크롤될 내용 아래쪽에 넣습니다. 안그럼 오류가 발생합니다.
// 스크롤바 따라다니는 메뉴
var stmnLEFT = 21; // 스크롤메뉴의 좌측 위치
var stmnGAP1 = 112; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 50; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 68; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 2; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 1; // 스크롤되는 속도 (클수록 늦게 움직임)
var stmnTimer;
function RefreshStaticMenu() {
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(floater2.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
stmnRefreshTimer = stmnActivateSpeed;
if ( stmnStartPoint != stmnEndPoint ) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
floater2.style.top = parseInt(floater2.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}
function InitializeStaticMenu() {
floater2.style.top = document.body.scrollTop + stmnBASE;
RefreshStaticMenu();
floater2.style.left = stmnLEFT;
}
//-->
</script>
<script type="text/jscript">InitializeStaticMenu();</script>
2013-09-02 추가
문서에 DocType 선언된 경우 스크롤 작동하지 않습니다.
예를 들면 아래와 같은 선언
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
참고사이트
http://blog.naver.com/kimsukhoon24/120044781218
댓글목록
등록된 댓글이 없습니다.