중앙 정렬일때 퀵메뉴 달기가 넘 힘들었다. ㅠ.ㅠ
중앙정렬의 홈페이지에서 스크롤 퀵메뉴처럼 우측에 고정해야하는 경우 어떻게 위치를 고정해야할까?
position을 absolute로 잡고, left를 50% 해주면 정중앙에 옵니다.
거기서 margin을 내용영역 폭의 절반만큼 왼쪽으로 주면 됩니다.
#content { width:900px; margin:0 auto; }
#quick { position:absolute; left:50%; margin-left:350px; top:0px; border:1px sold #666; background:#eee; }
퀵스크롤 적용
<div id='quick' style="position:absolute; left:50%; margin-left:468px; width:180px; z-index:2; border:1px solid #aaa;">
퀵메뉴
</div>
jQuery 이용하기 때문에 다음 소스도 추가(http://jquery.com/)
<script type="text/javascript" src="경로/js/jquery.js"></script>
<script type="text/javascript">
var quick_menu = $('#quick');
var quick_top = 114;
quick_menu.css('top', $(window).height() );
$(document).ready(function(){
quick_menu.animate( { "top": $(document).scrollTop() + quick_top +"px" }, 200 );
$(window).scroll(function(){
quick_menu.stop();
quick_menu.animate( { "top": $(document).scrollTop() + quick_top + "px" }, 500 );
});
});
</script>
후~ 이제 움직이는 퀵메뉴 완성!
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
감사감사 2013-11-21 14:43:40
0
답글달기
0
답글달기