영카트 5.3기준 스크롤시 aside 고정시키기
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>
댓글 1개
hikuki
6년 전
감사 합니다. ^^
게시판 목록
영카트5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 431 | 2개월 전 | 139 | ||
| 430 | 2개월 전 | 170 | ||
| 429 | 2개월 전 | 197 | ||
| 428 |
선택과집중
|
2개월 전 | 243 | |
| 427 |
선택과집중
|
3개월 전 | 391 | |
| 426 |
비버팩토리
|
3개월 전 | 363 | |
| 425 |
선택과집중
|
3개월 전 | 269 | |
| 424 |
선택과집중
|
3개월 전 | 403 | |
| 423 |
선택과집중
|
3개월 전 | 367 | |
| 422 |
선택과집중
|
4개월 전 | 336 | |
| 421 |
선택과집중
|
4개월 전 | 386 | |
| 420 | 4개월 전 | 426 | ||
| 419 |
선택과집중
|
4개월 전 | 366 | |
| 418 |
세르반데스
|
4개월 전 | 331 | |
| 417 |
선택과집중
|
4개월 전 | 422 | |
| 416 |
선택과집중
|
5개월 전 | 334 | |
| 415 |
선택과집중
|
5개월 전 | 366 | |
| 414 |
선택과집중
|
5개월 전 | 382 | |
| 413 |
선택과집중
|
5개월 전 | 465 | |
| 412 |
선택과집중
|
6개월 전 | 408 | |
| 411 |
선택과집중
|
6개월 전 | 318 | |
| 410 |
다케미카코
|
8개월 전 | 832 | |
| 409 |
다케미카코
|
8개월 전 | 585 | |
| 408 | 8개월 전 | 569 | ||
| 407 |
|
10개월 전 | 929 | |
| 406 | 11개월 전 | 1023 | ||
| 405 |
|
11개월 전 | 562 | |
| 404 | 1년 전 | 1276 | ||
| 403 | 1년 전 | 747 | ||
| 402 | 1년 전 | 782 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기