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

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

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

감사 합니다. ^^

게시글 목록

번호 제목
1483
1481
1479
1474
1473
1463
1458
1457
1456
1452
1449
1448
1442
1441
1426
1411
1389
1388
1372
1359
1357
1355
1348
1347
1338
1332
1328
1313
1307
1303