<div id="alwaysVisible" style="position: absolute; border: solid 3px #FFA500; top: 5px;
            left: 5px; color: #FFA500; width: 150px; height: 150px; padding: 10px 10px 10px 10px">
    이 영역이 항상 보입니다.
</div>
     
   <script type="text/javascript">
            var offsetX = 800;
            var offsetY = 50;

            window.onload = scrollHandler;

            function scrollHandler() {

                var objVisible = document.getElementById("alwaysVisible");
                var targetY = document.documentElement.scrollTop + offsetY;                
                  //document.body.scrollTop 을 쓸경우 값이 0으로 고정됨 - 일반 Html에서만 가능

                var currentY = parseInt(objVisible.style.top);

                if (currentY != targetY) {
                    objVisible.style.left = offsetX;
                    var scrollAmount = Math.ceil(Math.abs(targetY - currentY) / 20)

                    if (currentY > targetY) {
                        objVisible.style.top = currentY - scrollAmount;
                    }
                    else {
                        objVisible.style.top = currentY + scrollAmount;
                    }
                }
                setTimeout(scrollHandler, 10);
            }
</script>

+ Recent posts