메뉴 보이기
Profile
이온디

2009.01.20

Script

스크롤 따라다니는 레이어

조회 수 5746 추천 수 0
<style>
#STATICMENU
{
position:absolute;
left:expression((document.body.clientWidth-this.style.width)/2-this.getAttribute("pos"));
}
</style>
<!--가운데값 계산끝//-->
<script language="javascript">
<!--
        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(); // 스크립트 가동
                }

        }
-->
</script>
엔지오식 좌측이동메뉴 레이어 가운데기준정렬

<!-- 스크롤메뉴를 위한 구성입니다. -->
<div id="STATICMENU" pos=390>
<!--pos 부분에 숫자값이 위치를 정하는 부분입니다... 가운데를 0으로 하여 왼쪽은 +값, 오른쪽은 -값으로 설정하시면 됩니다//-->

        <!-- 메뉴가 들어갈 부분... 본인의 홈페이지에 맞게 적당히 편집하세요. -->
        <table cellpadding="0" cellspacing="0" border="1" style="background:#cccccc; width:190px;">
        <tr>
                <td style="font-weight:bold; text-align:center;">메뉴가 여기 들어간다고라라라<br>메뉴메뉴<br><br>메뉴메뉴<br><br>메뉴가 여기 들어간다고라라라<br>메뉴메뉴<br><br>메뉴메뉴<br><br></td>
        </tr>
        <tr>
                <td>자유게시판</td>
        </tr>
        </table>
        <!-- 메뉴부분 끝 -->

        <!-- 애니메이션 유무를 체크하는 부분 -->
        <input id="ANIMATE" type="checkbox" onclick="ToggleAnimate();"> Animate

        <!-- 스크롤메뉴를 가동하는 자바스크립트 -->
        <script language="javascript">InitializeStaticMenu();</script>


</div>
<!-- 스크롤 메뉴 정의 끝 -->
Profile
0
Lv

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
100 드롭다운 가로형 메뉴 2009.01.20 4772
99 탭메뉴형 자바스크립트 2009.01.20 4973
98 [HTML5] dl과 ul의 상하관계(?)에 대해서 질문드립니다. 1 2009.01.20 5121
97 Dolphin CSS Menu 2009.01.20 3785
96 Cut & Paste CSS Horizontal List Menu 2009.01.20 3859
95 [Script] 슬라이딩 레이어 1 2009.01.20 5815
94 [Script] 스크롤 따라다니는 레이어 2009.01.20 4881
[Script] 스크롤 따라다니는 레이어 2 2009.01.20 5746
92 [Script] 간단한 점프메뉴(selecter) 2009.01.20 4842
91 [Script] 화면 왼쪽에 숨겨진 레이어 꺼내기 1 2009.01.20 5608
90 [Script] 메뉴 슬라이딩(가로) 1 2009.01.20 7167
89 [Script] 클릭하면 슬라이드되면서 펼쳐지는 사이드 메뉴 2009.01.20 8242
88 [Script] 가로 세로가 호환되는 메뉴 2009.01.20 4127
87 [Script] 위의 메뉴에 마우스를 올리면 밑에 메뉴가 나오는 소스 2009.01.20 4734
86 [Script] 롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) 2 2009.01.20 6402
85 [Script] Show-Hide Layers (by 태그매니아) 3 2009.01.20 4934
84 [Script] Show-Hide Layers (by 신의키스) 2009.01.19 4644
83 [Script] div 높이 100% 맞추기 2009.01.18 6826
82 [Script] 롤오버 메뉴 만들기 1 2009.01.18 5880
81 주석 표시하기 2009.01.14 3506