스크롤 따라다니는 퀵메뉴 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

스크롤 따라다니는 퀵메뉴 정보

스크롤 따라다니는 퀵메뉴

본문

퍼와서 적용해본 소스입니다..

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
  • 복사

댓글 18개

<!-- 애니메이션 유무를 체크하는 부분 -->
        <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>
© SIRSOFT
현재 페이지 제일 처음으로