$(document).ready(function(){ var currentPosition = parseInt($(".quickmenu").css("top")); $(window).scroll(function() { var position = $(window).scrollTop(); $(".quickmenu").stop().animate({"top":position+currentPosition+"px"},1000); }); });
<div class="quickmenu"> <ul> <li><a href="#">등급별혜택</a></li> <li><a href="#">1:1문의</a></li> <li><a href="#">후기</a></li> </ul> </div> <div class="content"> 내용<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>내용<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> </div>
div, ul, li {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding:0;margin:0} a {text-decoration:none;} .quickmenu {position:absolute;width:90px;top:50%;margin-top:-50px;right:10px;background:#fff;} .quickmenu ul {position:relative;float:left;width:100%;display:inline-block;*display:inline;border:1px solid #ddd;} .quickmenu ul li {float:left;width:100%;border-bottom:1px solid #ddd;text-align:center;display:inline-block;*display:inline;} .quickmenu ul li a {position:relative;float:left;width:100%;height:30px;line-height:30px;text-align:center;color:#999;font-size:9.5pt;} .quickmenu ul li a:hover {color:#000;} .quickmenu ul li:last-child {border-bottom:0;} .content {position:relative;min-height:1000px;}