움직이는 스크롤바 스크립트에 대해 질문입니다.
본문
그누보드랑 관련은 없어, 올려도 되는지 모르지만 문제 있을시에 바로 삭제하겠습니다.
먼저 위에 링크, 사진와 같이, 움직이는 스크롤바 스크립트를 사용하고자 합니다.
스크롤바의 이미지는 설명하게 편하게 11번가의 것으로 잠시 캡쳐해왔습니다.
작동은 잘 되는것 같습니다만,
문제는, 스마트폰에서 본다던가, 제가 작업한 해상도(1920x1080)가 아닐시에
이미지가 홈페이지내용을 넘어버린다는 것입니다.
실제로 11번가 홈페이지는 모바일에서 접속하든 상관없이 제자리를 지키고 있는데요....
제가 원하는건 홈페이지든 모바일이든 접속했을때, 해상도에 상관없이 제가 설정한 그자리를 지켜주었으면 하는데..
그게 잘 안되네요... 어느부분을 만져야할지 ㅠㅠㅠㅠㅠ
아니면 만지는것과 관계없이 제가 사용한 스크립트로는 저게 최선인지요...
head와 head 사이부분에는
<script type="text/javascript">
var stmnLEFT = 10; // 오른쪽 여백
var stmnGAP1 = 0; // 위쪽 여백
var stmnGAP2 = 150; // 스크롤시 브라우저 위쪽과 떨어지는 거리
var stmnBASE = 150; // 스크롤 시작위치
var stmnActivateSpeed = 35; //스크롤을 인식하는 딜레이 (숫자가 클수록 느리게 인식)
var stmnScrollSpeed = 20; //스크롤 속도 (클수록 느림)
var stmnTimer;
function RefreshStaticMenu() {
var stmnStartPoint, stmnEndPoint;
stmnStartPoint = parseInt(document.getElementById('STATICMENU').style.top, 10);
stmnEndPoint = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
if (stmnStartPoint != stmnEndPoint) {
stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
document.getElementById('STATICMENU').style.top = parseInt(document.getElementById('STATICMENU').style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount ) + 'px';
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout("RefreshStaticMenu();", stmnActivateSpeed);
}
function InitializeStaticMenu() {
document.getElementById('STATICMENU').style.right = stmnLEFT + 'px'; //처음에 오른쪽에 위치. left로 바꿔도.
document.getElementById('STATICMENU').style.top = document.body.scrollTop + stmnBASE + 'px';
RefreshStaticMenu();
}
</script>
<style type="text/css">
#STATICMENU { margin: 0pt; padding: 0pt; position: absolute; right: 0px; top: 0px;}
</style>
body를 아래로 수정했고,
<body id="본래 설정" onload="InitializeStaticMenu();">
body 아래에는
<div id="STATICMENU">
스크롤바 메뉴 삽입
</div>
답변 1
사이트 폭이 950일 경우 우측에 배너를 고정시키는 스크립트입니다.응용해 보세요.
#rightbanner 레이어는 position을 absolute 해주세요
jQuery(document).ready(function(){
var bodyw = jQuery("body").width();
//우측 배너 위치
jQuery("#rightbanner").css({
left: 960 + (bodyw - 950)/2 + "px"
});
jQuery(window).resize(function(){
var bodyw = jQuery("body").width();
//우측 리사이즈시..
jQuery("#rightbanner").css({
left: 960 + (bodyw - 950)/2 + "px"
});
});
});
