티스토리를 사용하다 보니 개인적으로 하고 싶은 것을 맘대로 사용할 수 없는 것이 좀 답답하네요. 호스팅 서비스 받을 땐 뭐든 할 수 있어서 좋았는데 말이죠. 나름 장단점이 있지만 답답해 할 수 만은 없으니 억지로라도 이것저것 넣어서 사용해야죠.
스크롤을 따라 다니는 메뉴나 이미지 등을 보신 적이 있을 것인데요. 제 사이트에도 우측에 보시면 푸른색 화살표가 둥둥 따라다니죠. 클릭하면 스르륵~~ 페이지 상단으로 이동합니다. 번쩍 이동 하는 것이 아니고 스르륵~~ 입니다.. ^^
저는 간단하게 저런 용도로만 사용하지만 응용을 하신다면 뭐든지 스크롤을 쫓아 다니게 할 수 있습니다. 메뉴라던지, 카테고리나, 공지사항, 모두들 좋아하는 광고도요. 참고로 플로팅 배너를 이용하여 애드센스 광고를 게재하면 절대 안됩니다. 광고가 쫄쫄 따라다니게 하는 것은 애드센스 정책 위반입니다. 계정 정책 위반 사항으로 애드센스 계정을 비활성까지 당할 수 있습니다.
스크롤 따라다니는 플로팅 배너
압축 파일 안에는 top.htm , util.js 파일 2개가 있습니다. 이미지는 배포가 가능한 것인지 확실히 알 수 없어서 넣지 못하였습니다. 이미지 대신 텍스트로 출력 되니 이미지는 직접 다른 것으로 교체해주시고요.
현재 티스토리를 사용 중이므로 티스토리에 적용 시키는 방법으로 설명할 것인데요. 뭐 소스를 수정 사용할 수 있는 곳이라면 어느 곳이든 사용 가능합니다.
아래 설명된 방법은 티스토리에만 적용됩니다. 다른 곳에 사용 하시는 분들은 환경에 맞게 파일 경로 수정하셔야 합니다.
1. goTop.zip 파일을 다운로드 받는다
2. util.js 파일을 업로드한다.
압축 파일 안의 util.js 파일을 자신의 티스토리 스킨 파일 업로드에 업로드 하시고요.
3. 티스토리 스킨에 소스를 추가한다.
<head></head> 사이에 아래의 소스를 삽입합니다.
<style type=”text/css”></style> 사이의 내용은 티스토리 style.css 에 추가하셔도 됩니다.
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
var stmnLEFT = 10; // 우측 여백
var stmnGAP1 = 0; // 위쪽 여백
var stmnGAP2 = 550; // 스크롤시 브라우저 위쪽과 떨어지는 거리
var stmnBASE = 550; // 스크롤 시작위치
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';
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 onload="InitializeStaticMenu();">
<body onload=”InitializeStaticMenu();”> 수정한 내용 바로 아래에 아래 소스를 추가합니다. 이미지는 반드시 별로도 업로드 후 이미지명 수정하셔야 합니다.
<body onload="InitializeStaticMenu();">
<div id="STATICMENU">
<a href="#" onclick="MGJS.goTop();return false;" onfocus="this.blur()"><img src='./images/goTop.png' style="width:32px; height:32px; border:0;"></a>
</div>
위에 소스 내용만 적용해도 스크롤을 따라다니는 쫄쫄이를 사용하실 수 있습니다.
4. 소스의 수정 사용방법
쫄쫄이의 상하 위치는 아래 부분을 소스를 수정하시면 되고요.
var stmnLEFT = 10; // 우측 여백
var stmnGAP1 = 0; // 위쪽 여백
var stmnGAP2 = 550; // 스크롤 시 브라우저 위쪽과 떨어지는 거리
var stmnBASE = 550; // 스크롤 시작 위치
쫄쫄이의 좌우 기준을 우측으로 넣어 두었는데요. 왼쪽을 기준으로 넣고 싶으신 분들은 아래 소스 부분을 붉은색 소스처럼 수정하시면 됩니다.
document.getElementById(‘STATICMENU’).style.right = stmnLEFT + ‘px’;
document.getElementById(‘STATICMENU’).style.left = stmnLEFT + ‘px’;
#STATICMENU { margin: 0pt; padding: 0pt; position: absolute; right: 0px; top: 0px;}
#STATICMENU { margin: 0pt; padding: 0pt; position: absolute; left: 0px; top: 0px;}
5. 응용하기
응용의 범위는 너무 넓어서 하나하나 설명을 못 드리고요. <div id=”STATICMENU”></div> 사이에 원하시는 것을 넣어서 사용하시면 되겠죠. 끝~