<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.quick { position:absolute; width: 150px; top:0; right:0; display: inline-block; transition-duration: 1s; margin-top:10em; margin-right:1em; }
/* 스크롤바 박스 */
.quick > div { background-color: #f1f1f1; border: 2px solid #ddd; border-radius: 0.5em;}
</style>
<script>
// 스크롤을 만들기위해 body 를 키움 없애도 뎀
$(function () { $("html,body").css("height", "10000px");});
// 따라다니게 하기 위한 처리
$(window).scroll(function (e) {
$(".quick").css("top", $(this).scrollTop()+"px");
});
</script>
</head>
<body>
<div class="quick">
<div>
<ul>
<li><a>menu 1</a></li>
<li><a>menu 2</a></li>
<li><a>menu 3</a></li>
<li><a>menu 4</a></li>
<li><a>menu 5</a></li>
</ul>
</div>
</div>
</body>
</html>
자바스크립트(Javascript)로 변경해 봄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.quick { position:absolute; width: 150px; top:0; right:0; display: inline-block; transition-duration: 1s; margin-top:10em; margin-right:1em; }
/* 스크롤바 박스 */
.quick > div { background-color: #f1f1f1; border: 2px solid #ddd; border-radius: 0.5em;}
</style>
<script>
// 창크기 키워 스크롤 나오게 하기
window.onload = function () {
document.getElementsByTagName("body")[0].style.height = "10000px";
}
window.addEventListener('scroll', function (e) {
document.querySelector(".quick").style.top = window.scrollY + "px"
})
</script>
</head>
<body>
<div class="quick">
<div>
<ul>
<li><a>menu 1</a></li>
<li><a>menu 2</a></li>
<li><a>menu 3</a></li>
<li><a>menu 4</a></li>
<li><a>menu 5</a></li>
</ul>
</div>
</div>
</body>
</html>
댓글 없음:
댓글 쓰기