scrollify footer bottom positioning

Question

It's been a while i've been trying to solve this out myself. I am using scrollify jquery. I have total of FIVE sections and scrollify is working totally fine. I want the footer to be shown in the last section named "five" but it's out of the section.

Here goes my code:

<section class="panel five" data-section-name="five">
   <div class="contactus bottom-10">
      <!-- IT WAS JUST A CONTACT US FORM, I removed it so the code looks easy and small -->
   </div>
   <!-- end contact us -->

   <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 the jquery

$(function () {
   $(".panel").css({
      "height": $(window).height()
   });

   $.scrollify({
      section: ".panel" //This is the part to detect section ?
   });

   $(".scroll").click(function (e) {
      e.preventDefault();
      $.scrollify("move", $(this).attr("href"));
   });
});

So basically i want to fall the footer-wrapper into the bottom of the page withing the section five. but what happens to be is it goes beyond the section. removing absolute will bring the footer upwards and will create a gaping in the bottom. I cannot give margin-top because in different screens, its gonna cause a problem.

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

Answer 1

Well, have you tried fixedinstead of absolute ?

#footer-wrapper {
 width:100%;
 position:fixed;/* <== */
 bottom:0;
 height: 50px;

 z-index:999;/* could be useful... */
}

EDIT In addition, you have to used JS/JQuery to hide/show it. absolute and fixed works for the whole html page. Therefore you have to detect when Section 5 is displayed or not, and show()/hide() #footer-wrapper conssequently.

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

Therefore, the deal is to detect "Section 5 has shown"/"Section has passed hidden". Or better "A section has taken the place, Section #X", if (X==5), if(X!=5)...".