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

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

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

감사 합니다. ^^

게시글 목록

번호 제목
2503
2501
2497
2495
2491
2490
2489
2486
2484
2483
2481
2476
2475
2474
2472
2469
2467
2466
2465
2464
2463
2460
2459
2456
2449
2446
2441
2420
2419
2417