영카트 5.3기준 스크롤시 aside 고정시키기 > 영카트5 팁자료실

영카트5 팁자료실

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

영카트 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>
추천
4

댓글 1개

전체 1
영카트5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT