영카트 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개

© SIRSOFT
현재 페이지 제일 처음으로