DevilStudy

스크롤링 테스트 본문

프로그래밍공부/JavaScript

스크롤링 테스트

Devil-Choi 2009. 3. 3. 10:49
<HTML>
<HEAD>
<TITLE> New Document </TITLE>


<script type="text/javascript">
        <!--
                var stmnLEFT = 0; // 왼쪽 여백 (메뉴가 왼쪽에서 400픽셀 떨어진 곳에 보여집니다)
                var stmnGAP1 = 330; // 위쪽 여백 (메뉴가 위에서 10픽셀 떨어진 곳에 보여집니다)
                var stmnGAP2 = 330; // 스크롤시 브라우저 위쪽과 떨어지는 거리
                var stmnBASE = 300; // 스크롤 시작위치
                var stmnActivateSpeed = 35;
                var stmnScrollSpeed = 20;

                var stmnTimer;


                function RefreshStaticMenu() {
                        var stmnStartPoint, stmnEndPoint;
                       
                        stmnStartPoint = parseInt(document.getElementById('sidebar').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('sidebar').style.top = parseInt(document.getElementById('sidebar').style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount ) + 'px';
                                stmnRefreshTimer = stmnScrollSpeed;
                        }
                       
                        stmnTimer = setTimeout("RefreshStaticMenu();", stmnActivateSpeed);
                }


                function InitializeStaticMenu() {
                        document.getElementById('sidebar').style.left = stmnLEFT + 'px';
                        document.getElementById('sidebar').style.top = document.body.scrollTop + stmnBASE + 'px';
                        RefreshStaticMenu();
                }
        //-->
</script>

</HEAD>
<BODY onLoad="InitializeStaticMenu();">

<div id="sidebar" style="position:absolute;left:0px;top:0px;">aaa</div>
<div style="height:800px;border:1px solid"></div>

</BODY>
</HTML>


출처 : http://harogipro.tistory.com/ 
Comments