위버

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

· 2019-08-19 (월) 16:39:34 · 3710 · 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개

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

영카트5 팁자료실

455건
+
제목 글쓴이 날짜 조회
19-09-23 조회 3,602
19-09-21 조회 3,722
19-09-17 조회 3,525
19-09-06 조회 3,704
19-08-31 조회 3,448
19-08-31 조회 2,644
19-08-19 조회 3,711
19-08-16 조회 3,268
19-07-13 조회 4,140
19-06-07 조회 5,250
19-05-21 조회 1만
19-05-20 조회 4,648
19-04-02 조회 4,572
19-03-22 조회 5,166
19-03-21 조회 4,775
19-03-18 조회 5,799
19-03-07 조회 6,490
19-03-06 조회 3,847
19-03-01 조회 3,657
19-02-22 조회 5,310
19-01-29 조회 4,927
18-12-04 조회 4,252
18-11-28 조회 6,547
18-11-23 조회 4,528
18-11-13 조회 5,586
18-10-31 조회 4,710
18-10-26 조회 4,295
18-09-21 조회 5,762
18-09-17 조회 3,880
18-09-06 조회 7,144