테스트 사이트 - 개발 중인 베타 버전입니다

영카트 5.3기준 스크롤시 aside 고정시키기

· 6년 전 · 2943 · 1
qna 답변에 쓰고 아까워서 남겨봅니다.
#aside가 모니터높이보다 클수가있어서 fixed될때 스크롤생기게 해놨어요.
DEMO : http://spec.sekti.net/shop/list.php?ca_id=10

<style>
#wrapper.aside_fixed #aside{
position:fixed;
display: block;
z-index:9999;
top:0;
height: 100%;
overflow-y: auto;
}
#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>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

감사 합니다. ^^

게시글 목록

번호 제목
2169
2168
2167
2158
2146
2140
2130
2114
2102
2095
2084
2075
2072
2070
2069
2065
2058
2056
2055
2054
2049
2038
2036
1989
1956
1923
1918
1904
1892
1891