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 fixed
instead 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
Post a Comment