스크롤 내릴때 하단 바 고정 하는방법

일단 그누보드 내부에서 css가 이상해서 내가 직접 필터해서 쓴걸로 변경 해야한다.

아래 소스 참고하면된다. 아래 소스코드 참고하면 html,body {height:100%} 으로 지정을 해야지 하단에 고정이 된다.

html 이 포함된 부분에서 문제가 있는것 같은데.. 이유는 아무리 찾아봐도 잘 모르겠고 아래 소스코드 쓰면 된다. 그누 특정상 직접 커스텀을 해야된다.

css

html, body{height:100%;}body{margin:0;padding:0;font-size:0.75em;min-height:320px;height:100%;background:#f5f5f5;font-family:나눔바른고딕,'NanumBarunGothic',sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html, h1, h2, h3, h4, h5, h6, form, fieldset, img{margin:0;padding:0;border:0}h1, h2, h3, h4, h5, h6{font-size:1em;font-family:나눔바른고딕,'NanumBarunGothic',sans-serif;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{line-height:inherit;vertical-align:top;border:0 none;-webkit-font-smoothing:antialiased;scroll-behavior:auto;}legend{position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}label, input, button, select, img{vertical-align:middle}input, button{margin:0;padding:0;font-size:1em;font-family:나눔바른고딕,'NanumBarunGothic',sans-serif;}button{cursor:pointer}input[type=text], input[type=password], input[type=submit], input[type=image], button{font-size:1em;-webkit-appearance:none}textarea, select{font-size:1em;font-family:나눔바른고딕,'NanumBarunGothic',sans-serif;}textarea{border-radius:0;-webkit-appearance:none;font-family:나눔바른고딕,'NanumBarunGothic',sans-serif;}select{margin:0;background:none;font-family:나눔바른고딕,'NanumBarunGothic',sans-serif;}p{margin:0;padding:0;word-break:break-all}hr{display:none}pre{overflow-x:scroll;font-size:1.1em}a{color:#000;text-decoration:none}ul,li,dl,dt,dd{padding:0;margin:0}ul{list-style:none}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}input[type=text],input[type=password], textarea{-webkit-transition:all 0.30s ease-in-out;-moz-transition:all 0.30s ease-in-out;-ms-transition:all 0.30s ease-in-out;-o-transition:all 0.30s ease-in-out;outline:none;}input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus{-webkit-box-shadow:0 0 5px #9ed4ff;-moz-box-shadow:0 0 5px #9ed4ff;box-shadow:0 0 5px #9ed4ff;border:1px solid #558ab7 !important;}a[href^="tel"]{color:inherit;text-decoration:none;}

그리고 나서 포지션 픽시드로 하면 고정이 된다. 하단까지 아예 내려가면 푸터가 가려지는데 이걸 제이쿼리로 소스 추가하면 된다.

css

position:fixed;bottom:0;left:0;right:0;z-index:10000;

혹시 몰라서 전체적으로 소스코드를 넣었다. 참고하면 된다.

html

<div id="bottomNav" class="fixed_sidebar">
    <ul class="fixed_sidebar_wrap">
        <li><a href="#" class="btn_hdcate"><span class="sound_only">분류</span></a></li>
        <li><a href="#" class="btn_kakao"><span class="kakao_icon"></span> <span class="fixed_name">카카오 상담하기</span></a></li>
        <li><a href="tel:<?php echo $default['de_admin_company_tel']; ?>" class="btn_tel"><span class="tel_icon"></span> <span class="fixed_name">전화 상담하기</span></a></li>
    </ul>
</div>

css

/* 하단 고정바 */
#bottomNav {border-top:1px solid #eee;background: #fff;transition: top 0.3s;width: 100%;}
#bottomNav .fixed_sidebar_wrap {display: flex;}
#bottomNav .fixed_sidebar_wrap li {display: flex;flex-flow: column;flex: 1 1 auto;align-items: center;text-align: center;position: relative;}
#bottomNav .fixed_sidebar_wrap li a {display: inline-block;padding: 10px 15px;font-size: 13px;}
#bottomNav .fixed_sidebar_wrap li .btn_hdcate {display: inline-block;background: url("../img/mobile/hamburger_icon.png") center no-repeat;background-size: 20px;padding: 20px 10px;}
#bottomNav .fixed_sidebar_wrap li .btn_kakao .kakao_icon {display: inline-block;background: url("../img/mobile/kakao_icon.png") no-repeat;background-size: 20px 20px;background-position: 50%;padding: 10px;vertical-align: top;}
#bottomNav .fixed_sidebar_wrap li .btn_tel .tel_icon {display: inline-block;background: url("../img/mobile/tel_icon.png") no-repeat;background-size: 20px 20px;background-position: 50%;padding: 10px;vertical-align: top;}
#bottomNav .fixed_sidebar_wrap li a .fixed_name {display: inline-block;padding-top: 3px;padding-left: 5px;}
.fixed_sidebar {position: fixed;bottom: 0;left:0;right:0;z-index: 10000;}

$(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() > $(document).height() - 300) {
            $('#bottomNav').hide();
        } else {
            $('#bottomNav').show();
        }
    });

스크롤 내릴때 하단 바 고정 하는방법 #

스크롤 내릴때 하단 바 고정 하는방법