스크롤 따라다니는 퀵메뉴 정보
스크롤 따라다니는 퀵메뉴
관련링크
본문
퍼와서 적용해본 소스입니다..
head.sub.php맨 하단에 카피
---------------------------------
<script language="javascript">
var stmnLEFT = 130; // 스크롤메뉴의 좌측 위치. 필요 없을 경우 삭제
var stmnGAP1 = 150; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)
var stmnTimer;
// 쿠키 읽기
function ReadCookie(name)
{
var label = name + "=";
var labelLen = label.length;
var cLen = document.cookie.length;
var i = 0;
while (i < cLen) {
var j = i + labelLen;
if (document.cookie.substring(i, j) == label) {
var cEnd = document.cookie.indexOf(";", j);
if (cEnd == -1) cEnd = document.cookie.length;
return unescape(document.cookie.substring(j, cEnd));
}
i++;
}
return "";
}
// 쿠키 저장
function SaveCookie(name, value, expire)
{
var eDate = new Date();
eDate.setDate(eDate.getDate() + expire);
document.cookie = name + "=" + value + "; expires=" + eDate.toGMTString()+ "; path=/";
}
// 스크롤 메뉴의 위치 갱신
function RefreshStaticMenu()
{
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(STATICMENU.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 );
STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}
// 메뉴 ON/OFF 하기
function ToggleAnimate()
{
if (ANIMATE.checked) { // 이동하기 버튼이 체크되었다면
RefreshStaticMenu(); // 메뉴위치를 다시 조정
SaveCookie("ANIMATE", "true", 300); // 이동이 ON 상태라고 쿠키를 설정
}
else { // 아니라면... (이동하기 버튼이 체크되어 있지 않으면)
clearTimeout(stmnTimer); // 이동용 타이머 해제
STATICMENU.style.top = stmnGAP1; // 메뉴의 위치를 상단으로 옮긴다.
SaveCookie("ANIMATE", "false", 300); // 이동상태가 "OFF" 임
}
}
// 메뉴 초기화
function InitializeStaticMenu()
{
if (ReadCookie("ANIMATE") == "false") { // 이동상태가 off 상태라면
ANIMATE.checked = false; // 체크표시를 지우고
STATICMENU.style.top = document.body.scrollTop + stmnGAP1; // 맨 위에 들러 붙는다.
}
else { // 이동 on 상태라면
ANIMATE.checked = true; // 체크표시를 하고
STATICMENU.style.top = document.body.scrollTop + stmnBASE; // 기본위치로 이동한다.
RefreshStaticMenu(); // 스크립트 가동
}
STATICMENU.style.left = stmnLEFT; // 메뉴 왼쪽 위치 초기화. 필요없을 경우 삭제
}
</script>
----------------------------------------------
적용하고자 하는곳에 카피
<!-- 스크롤메뉴를 위한 구성입니다. -->
<div id="STATICMENU" style="position:absolute; z-index:100; left:-5000px;">
<!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
<table cellpadding="5" cellspacing="0" border="1" style="background:#cccccc; width:200px;">
<tr>
<td style="font-weight:bold; text-align:center;">퀵메뉴</td>
</tr>
<tr>
<td><?=latest_banner("banner_right","rightbanner", 5, 1); ?></td>
</tr>
</table>
<!-- 메뉴부분 끝 -->
<!-- 애니메이션 유무를 체크하는 부분 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> Animate
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
</div>
<!-- 스크롤 메뉴 정의 끝 -->
http://zeronara.net/
오른쪽 배너를 응용적용해 봤습니다..
목진철님의 최신배너를 사용했습니다.
head.sub.php맨 하단에 카피
---------------------------------
<script language="javascript">
var stmnLEFT = 130; // 스크롤메뉴의 좌측 위치. 필요 없을 경우 삭제
var stmnGAP1 = 150; // 페이지 헤더부분의 여백 (이보다 위로는 올라가지 않음)
var stmnGAP2 = 10; // 스크롤시 브라우저 상단과 약간 띄움. 필요없으면 0으로 세팅
var stmnBASE = 200; // 스크롤메뉴 초기 시작위치 (아무렇게나 해도 상관은 없지만 stmnGAP1과 약간 차이를 주는게 보기 좋음)
var stmnActivateSpeed = 200; // 움직임을 감지하는 속도 (숫자가 클수록 늦게 알아차림)
var stmnScrollSpeed = 10; // 스크롤되는 속도 (클수록 늦게 움직임)
var stmnTimer;
// 쿠키 읽기
function ReadCookie(name)
{
var label = name + "=";
var labelLen = label.length;
var cLen = document.cookie.length;
var i = 0;
while (i < cLen) {
var j = i + labelLen;
if (document.cookie.substring(i, j) == label) {
var cEnd = document.cookie.indexOf(";", j);
if (cEnd == -1) cEnd = document.cookie.length;
return unescape(document.cookie.substring(j, cEnd));
}
i++;
}
return "";
}
// 쿠키 저장
function SaveCookie(name, value, expire)
{
var eDate = new Date();
eDate.setDate(eDate.getDate() + expire);
document.cookie = name + "=" + value + "; expires=" + eDate.toGMTString()+ "; path=/";
}
// 스크롤 메뉴의 위치 갱신
function RefreshStaticMenu()
{
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(STATICMENU.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 );
STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
stmnRefreshTimer = stmnScrollSpeed;
}
stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}
// 메뉴 ON/OFF 하기
function ToggleAnimate()
{
if (ANIMATE.checked) { // 이동하기 버튼이 체크되었다면
RefreshStaticMenu(); // 메뉴위치를 다시 조정
SaveCookie("ANIMATE", "true", 300); // 이동이 ON 상태라고 쿠키를 설정
}
else { // 아니라면... (이동하기 버튼이 체크되어 있지 않으면)
clearTimeout(stmnTimer); // 이동용 타이머 해제
STATICMENU.style.top = stmnGAP1; // 메뉴의 위치를 상단으로 옮긴다.
SaveCookie("ANIMATE", "false", 300); // 이동상태가 "OFF" 임
}
}
// 메뉴 초기화
function InitializeStaticMenu()
{
if (ReadCookie("ANIMATE") == "false") { // 이동상태가 off 상태라면
ANIMATE.checked = false; // 체크표시를 지우고
STATICMENU.style.top = document.body.scrollTop + stmnGAP1; // 맨 위에 들러 붙는다.
}
else { // 이동 on 상태라면
ANIMATE.checked = true; // 체크표시를 하고
STATICMENU.style.top = document.body.scrollTop + stmnBASE; // 기본위치로 이동한다.
RefreshStaticMenu(); // 스크립트 가동
}
STATICMENU.style.left = stmnLEFT; // 메뉴 왼쪽 위치 초기화. 필요없을 경우 삭제
}
</script>
----------------------------------------------
적용하고자 하는곳에 카피
<!-- 스크롤메뉴를 위한 구성입니다. -->
<div id="STATICMENU" style="position:absolute; z-index:100; left:-5000px;">
<!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
<table cellpadding="5" cellspacing="0" border="1" style="background:#cccccc; width:200px;">
<tr>
<td style="font-weight:bold; text-align:center;">퀵메뉴</td>
</tr>
<tr>
<td><?=latest_banner("banner_right","rightbanner", 5, 1); ?></td>
</tr>
</table>
<!-- 메뉴부분 끝 -->
<!-- 애니메이션 유무를 체크하는 부분 -->
<input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> Animate
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
</div>
<!-- 스크롤 메뉴 정의 끝 -->
http://zeronara.net/
오른쪽 배너를 응용적용해 봤습니다..
목진철님의 최신배너를 사용했습니다.
추천
5
5
댓글 18개
연후아빠님 좋은 팁 감사합니다.
오프 시킨후 브라우저를 닫고 다시 할려고 해보니 쿠키로인해 작동 불능이 되네요..
오프 시킨후 브라우저를 닫고 다시 할려고 해보니 쿠키로인해 작동 불능이 되네요..

<!-- 애니메이션 유무를 체크하는 부분 -->
<input id="ANIMATE" type="hidden" onclick="ToggleAnimate();">
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
임시방편으로 이용하셔도 됩니다~!
^^& 다들 안주무시나요...
저는 이상없이 잘돌아 가는데..ㅠ.ㅠ
<input id="ANIMATE" type="hidden" onclick="ToggleAnimate();">
<!-- 스크롤메뉴를 가동하는 자바스크립트 -->
<script language="javascript">InitializeStaticMenu();</script>
임시방편으로 이용하셔도 됩니다~!
^^& 다들 안주무시나요...
저는 이상없이 잘돌아 가는데..ㅠ.ㅠ
다시 한번 해보겠습니다.
밤이 깊어 오늘은 여기까지만 하고...
좋은밤 되세요..
밤이 깊어 오늘은 여기까지만 하고...
좋은밤 되세요..
새벽에 주무시지도 않고 수고많습니다...

항상 좋은 팁을 갈켜주시는 연후아빠님 ^^ 수고하셨습니다.
잘쓰겠습니다.
잘쓰겠습니다.
감사합니다.
블루비에서도 비슷한걸 봐서..
참고차 올립니다..
절대 딴지나.. 다른게 아니라.. 참고차..
<!---우측 스코롤링 부분--->
<SCRIPT language=JavaScript1.2>
function MM_showHideLayers2() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = -10;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) {
diffY = document.body.scrollTop;
diffX = 0;
}
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.banner.style.pixelTop += percent;
if(NS) document.banner.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.banner.style.pixelLeft += percent;
if(NS) document.banner.top += percent;
lastScrollY = lastScrollY + percent;
}
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
</script>
<div id="banner" style="position:absolute; right:0px; top:350px;">
<table border="0" width="55" height="100" cellspacing="0" cellpadding="0">
<tr><td><img src="http://imgnews.naver.com/image/w3/2006/04/06/20060406115746.jpg" border="0"></td></tr>
<tr><td align="center" height="40">
<img src="http://imgnews.naver.com/image/w3/2006/04/06/20060406115746.jpg" border="0">
<img src="http://imgnews.naver.com/image/w3/2006/04/06/20060406115746.jpg" hspace="1">
<img src="http://imgnews.naver.com/image/w3/2006/04/06/20060406115746.jpg" hspace="1">
<a onClick="javascript:location.href='./iconlist.asp?page=2&foldername=Boards&counternum=45&korname=게시판&garamwidth=0&garamheight=0&garamiconword=&icon_ca_list='" style="cursor:hand">
<img src="http://imgnews.naver.com/image/w3/2006/04/06/20060406115746.jpg" border="0"></a>
</td></tr>
</table>
</div>
<BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
블루비에서도 비슷한걸 봐서..
참고차 올립니다..
절대 딴지나.. 다른게 아니라.. 참고차..
<!---우측 스코롤링 부분--->
<SCRIPT language=JavaScript1.2>
function MM_showHideLayers2() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = -10;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) {
diffY = document.body.scrollTop;
diffX = 0;
}
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.banner.style.pixelTop += percent;
if(NS) document.banner.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.banner.style.pixelLeft += percent;
if(NS) document.banner.top += percent;
lastScrollY = lastScrollY + percent;
}
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
</script>
<div id="banner" style="position:absolute; right:0px; top:350px;">
<table border="0" width="55" height="100" cellspacing="0" cellpadding="0">
<tr><td><img src="http://imgnews.naver.com/image/w3/2006/04/06/20060406115746.jpg" border="0"></td></tr>
<tr><td align="center" height="40">
<img src="http://imgnews.naver.com/image/w3/2006/04/06/20060406115746.jpg" border="0">
<img src="http://imgnews.naver.com/image/w3/2006/04/06/20060406115746.jpg" hspace="1">
<img src="http://imgnews.naver.com/image/w3/2006/04/06/20060406115746.jpg" hspace="1">
<a onClick="javascript:location.href='./iconlist.asp?page=2&foldername=Boards&counternum=45&korname=게시판&garamwidth=0&garamheight=0&garamiconword=&icon_ca_list='" style="cursor:hand">
<img src="http://imgnews.naver.com/image/w3/2006/04/06/20060406115746.jpg" border="0"></a>
</td></tr>
</table>
</div>
<BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

비슷한 자료는 많이 있어요^^&
본인에 맞게 쉬운거 골라쓰세요^^
본인에 맞게 쉬운거 골라쓰세요^^
좋은팁 감사드립니다.
잘 사용하고 있습니다. 감사합니다
유용하게 쓰겠습니다. ㄳ
감사합니다

스크랩

ㄳ합니다.

좋네요 ^^
스크롤 퀵메뉴
초보에겐 모든게 어려워요~~

좋은팁 감사합니다.
스크롤퀵메뉴.. 소스