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

더블피디 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2019.08.19 15:42:34 조회 4663 (122.♡.♡.19)

본문

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

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

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

처리후 페이지 스크롤 후

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

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

#영카트5

답변 3

세크티 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2019-08-19 16:37:34 115.♡.♡.91

님을 위해서 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>

↳ 더블피디 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2019-08-19 17:18:34122.♡.♡.19

시간을 내주셨다니..감사드립니다.
일단 먼저 추천드립니다.

아래 그림처럼 스크롤 하다가 갑자기 점프 하듯이
왼쪽 aside 영역이 하단으로 내려가네요

Dessi 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2019-08-19 16:36:35 121.♡.♡.156

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

   $(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"
                   });
        }
        });
    });