화면 왼쪽면에 메뉴나 탭을 고정하는 방법 > 개발

브라우저 왼쪽 가장자리에 탭이나 메뉴 등을 붙이고자 하는 경우가 있다.
이 때는 css 에서 position:fixed 를 사용하여 왼쪽 편에 고정할 수가 있다.

그러나, fixed 는 고정하기는 하는데, 스크롤을 내려도 그대로 고정되어 있다.
왼쪽 면에 고정되어 있기는 하지만 스크롤을 내려면 올라가 버리는 것을 원할 수도 있다.

position:absolute 를 사용해서 고정할 수 있는데, 이렇게 하면 화면의 크기에 따라 위치가 변경되어 버린다.
이때는 브라우저 폭과 내용물의 폭을 체크하여 가변적으로 가로 위치를 왼쪽 끝으로 조절해 주면 된다.

그누보드5 를 기준으로 해당 기능을 구현한 소스틑 아래와 같다.
그누보드는 #wrapper 가 본문을 감싸고 있다.

[code]
<script type="text/javascript">
jQuery(function() {
$("#slide_wrap").css("left",get_slide_wrap_left_pos());
$(window).resize(function() {
$("#slide_wrap").css("left",get_slide_wrap_left_pos());
});
function get_slide_wrap_left_pos() {
//console.log("wrapper.width=" + $("#wrapper").width() + ",window.width=" + $(window).width());
var left_pos = 0;
if ($(window).width() > $("#wrapper").width()) { left_pos = ($("#wrapper").width() - $(window).width()) / 2; }
return left_pos;
}
});
</script>
[/code]

추천0