Scroll to bottom positioning of footer
It was a while when I tried to work it out myself. I am using scrollize jquery . I have only five sections and scrollify is working completely fine. I want the footer to appear in the last section called "five", but it came out of the section.
Here is 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;
}
Jquery part
$(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 drop the footer to the bottom of the page with a fifth. but what happens is beyond the scope of the section. removing the absolute will bring the footer up and create a gap at the bottom. I can’t give a margin-top because it will cause a problem on different screens.
I used this plugin named scrollify - http://codepen.io/gam3ov3r/pen/zrdqy
source to share
Well, have you tried fixed
instead absolute
?
#footer-wrapper {
width:100%;
position:fixed;/* <== */
bottom:0;
height: 50px;
z-index:999;/* could be useful... */
}
EDIT
Also, you have to use JS / JQuery to hide / show it. absolute
and fixed
works for the whole html page. Therefore, you need to detect when Section 5 is displayed, or show () / hide () # footer-wrapper.
var isSection5_displayed = /* ... check it here ... */;
if(isSection5_displayed) $("#footer-wrapper").show()
else $("#footer-wrapper").hide();
Consequently, the deal is to discover "Section 5 showed that" / "Section passed hidden." Or better "Section took place, Section # X" if (X == 5), if (X! = 5) ... ".
source to share
Make # footer-wrapper absolute, but in a relative div . This relative div could, should be. So # footer-w ... is absolute, section-relative, not body, and you will only see the footer in section 5.
This is just CSS.
CSS
section5 {
position:relative
}
#footer-wrapper {
/* what you already did */
}
Reading: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
source to share