javascript - scrollify footer bottom positioning -


it's been while i've been trying solve out myself. using scrollify jquery. have total of 5 sections , scrollify working totally fine. want footer shown in last section named "five" it's out of section.

here goes code:

<section class="panel five" data-section-name="five">    <div class="contactus bottom-10">       <!-- contact form, removed code looks easy , small -->    </div>    <!-- end contact -->     <div id="footer-wrapper">       <footer>          <!-- footer codes -->        </footer>    </div> <!--end footer wrapper --> </section> 

css

#footer-wrapper {    width:100%;    position:absolute;    bottom:0;    height: 50px; } 

part of jquery

$(function () {    $(".panel").css({       "height": $(window).height()    });     $.scrollify({       section: ".panel" //this part detect section ?    });     $(".scroll").click(function (e) {       e.preventdefault();       $.scrollify("move", $(this).attr("href"));    }); }); 

so want fall footer-wrapper bottom of page withing section five. happens goes beyond section. removing absolute bring footer upwards , create gaping in bottom. cannot give margin-top because in different screens, gonna cause problem.

i have used plugin named scrollify - http://codepen.io/gam3ov3r/pen/zrdqy

well, have tried fixedinstead of absolute ?

#footer-wrapper {  width:100%;  position:fixed;/* <== */  bottom:0;  height: 50px;   z-index:999;/* useful... */ } 

edit in addition, have used js/jquery hide/show it. absolute , fixed works whole html page. therefore have detect when section 5 displayed or not, , show()/hide() #footer-wrapper conssequently.

var issection5_displayed = /* ... check here ... */; if(issection5_displayed) $("#footer-wrapper").show() else $("#footer-wrapper").hide(); 

therefore, deal detect "section 5 has shown"/"section has passed hidden". or better "a section has taken place, section #x", if (x==5), if(x!=5)...".


Comments

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -