페이지 스크롤 시 aside 부분이 따라다닙니다...(헤더,메뉴바 만큼 항상 밑에...)

페이지 스크롤 시 aside 부분이 따라다닙니다...(헤더,메뉴바 만큼 항상 밑에...)

QA

페이지 스크롤 시 aside 부분이 따라다닙니다...(헤더,메뉴바 만큼 항상 밑에...)

본문

최초에는 페이지가 헤더가 있고, 메뉴바

그 아래 aside영역이 있습니다. 

 

aside 영역이 페이지 스크롤시 따라다니는것은 css 를 아래 그림처럼 변경 후 처리되었습니다. 

 

처리후 페이지 스크롤 후

최초 헤더, 메뉴바 부분에 만큼이 항상 비어있는데

 

이 부분을 헤더와 메뉴바가 없어진 후 페이지 위에 있도록 할 수 없을까요?

 

2049185043_1566196784.0352.png

 

 

이 질문에 댓글 쓰기 :

답변 3

님을 위해서 10분간 만들었어요. 적당한곳 하단에 넣어보세요.
<style>
    #wrapper.aside_fixed #aside{
        position:fixed;
        display: block;
        z-index:9999;
        top:0;
        height: 100%;
        overflow-y: scroll;
    }
    #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>

 

top : 0을 주면 위에 붙어있긴 할텐데 스크롤 안했을때도 위에 붙어버리니 제이쿼리로 해보시죠.

<script>

    $(document).ready(function() {
           var menu_offset = $('#aside').offset();
           $(window).scroll(function() {
             if ($(document).scrollTop() > menu_offset.top) {
                   $('#aside').css({ 
                        "position": "fixed", 
                        "display": "block", 
                        "z-index" : "9999",
                        "top":"0px"
                    });
             }else {
                $('#aside').css({ 
                        "display": "block", 
                        "position":"relative", 
                        "z-index" : "9999" 
                    });
             }
           });
     });

</script>

 

이걸 추가해보세요.

2049185043_1566204103.1192.png

2049185043_1566204148.463.png

 

 

중간까지 스크롤시에도 왼쪽 aside가 상단에 잘 붙어있습니다. 

그러다가 갑자기 왼쪽 aside가 밑으로 내려오고...

그뒤에는 스크롤 시 페이지와 같이 딸려갑니다. 

 

 

 

2049185043_1566204248.3194.png

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 123,198
QA 내용 검색

회원로그인

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