3

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

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
umanga shrestha
  • 368
  • 2
  • 8
  • 29
  • you should try with position:relative coz you put one div as part of scrolling div so you should try with that else you need to clarify what you are exactly mean by missed-out – Himesh Aadeshara Jul 30 '15 at 09:06

2 Answers2

2

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)...".

3pic
  • 1,188
  • 8
  • 26
  • 1
    Yeah i did tried fixed, it stays in the bottom but footer is displayed in every section. – umanga shrestha Jul 30 '15 at 08:57
  • 1
    Thanks,i edited my question aswell. you understood well what i was trying to say. Will try to figure out with jquery you had just mentioned. – umanga shrestha Jul 30 '15 at 09:14
  • The real deal, to me, is to detect "Section 5 has shown"/"Section has passed hidden". Or better: "A section has taken the place, Section #X", "if (X==5) show footer, if(X!=5) hide footer". That deserves a new question 'how to detect Section changes in the plugin'. SY. – 3pic Jul 30 '15 at 09:18
  • Can you please review the question again. I've added the jquery part which had section in it. I don't know any of jquery. – umanga shrestha Jul 30 '15 at 09:27
2

Make #footer-wrapper absolute, but in a relative div. This relative div could , it should be. Thus, #footer-w... is absolute, relatively to section, not body, and you'll see footer only in section 5.

It is only CSS.

CSS:

section5 {
position:relative
}

#footer-wrapper {
   /* what you already did */
}

Reading: https://css-tricks.com/absolute-positioning-inside-relative-positioning/

3pic
  • 1,188
  • 8
  • 26