페이지 스크롤 시 aside 부분이 따라다닙니다...(헤더,메뉴바 만큼 항상 밑에...)
본문
최초에는 페이지가 헤더가 있고, 메뉴바
그 아래 aside영역이 있습니다.
aside 영역이 페이지 스크롤시 따라다니는것은 css 를 아래 그림처럼 변경 후 처리되었습니다.
처리후 페이지 스크롤 후
최초 헤더, 메뉴바 부분에 만큼이 항상 비어있는데
이 부분을 헤더와 메뉴바가 없어진 후 페이지 위에 있도록 할 수 없을까요?
답변 3
님을 위해서 10분간 만들었어요. 적당한곳 하단에 넣어보세요. <style> #wrapper.aside_fixed #aside{ position:fixed; display: block; z-index:9999; top:0; height: 100%; overflow-y: scroll; } #wrapper.aside_fixed #aside.reach-end{ position: absolute!important; bottom: 0!important; top: auto!important; height: 100vh; } #wrapper.aside_fixed #container{ margin-left:235px; } </style> <script> $(document).ready(function () { var $container = $("#container"); var $wrapper = $("#wrapper"); var $aside = $("#aside"); var container_top = $container.offset().top; var $wrapper_bottom = $wrapper.offset().top+$wrapper.outerHeight(); (check_reach_end = function () { var scroll_top = $(window).scrollTop(); var sticky_limit_top = $wrapper_bottom-$aside.outerHeight(); if(scroll_top>sticky_limit_top){ $aside.addClass('reach-end') }else{ $aside.removeClass('reach-end') } if(scroll_top > container_top){ $wrapper.addClass('aside_fixed') return false; } if(scroll_top < container_top){ $wrapper.removeClass('aside_fixed') return false; } })(); $(window).scroll(function () { check_reach_end(); }); }) </script>
top : 0을 주면 위에 붙어있긴 할텐데 스크롤 안했을때도 위에 붙어버리니 제이쿼리로 해보시죠.
<script>
$(document).ready(function() {
var menu_offset = $('#aside').offset();
$(window).scroll(function() {
if ($(document).scrollTop() > menu_offset.top) {
$('#aside').css({
"position": "fixed",
"display": "block",
"z-index" : "9999",
"top":"0px"
});
}else {
$('#aside').css({
"display": "block",
"position":"relative",
"z-index" : "9999"
});
}
});
});
</script>
이걸 추가해보세요.