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

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

· 6년 전 · 2942 · 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개

감사 합니다. ^^

게시글 목록

번호 제목
2400
2394
2363
2362
2351
2350
2348
2347
2336
2326
2324
2323
2318
2306
2305
2299
2295
2293
2283
2279
2266
2254
2248
2232
2231
2204
2184
2183
2181
2179