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>
#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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 1291 | |
| 1283 | |
| 1274 | |
| 1264 | |
| 1261 | |
| 1258 | |
| 1255 | |
| 1247 | |
| 1244 | |
| 1237 | |
| 1232 | |
| 1220 | |
| 1213 | |
| 1202 | |
| 1195 | |
| 1192 | |
| 1191 | |
| 1182 | |
| 1169 | |
| 1160 | |
| 1158 | |
| 1156 | |
| 1154 | |
| 1152 | |
| 1136 | |
| 1129 | |
| 1122 | |
| 1112 | |
| 1084 | |
| 1074 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기