Footer Below Fixed Footer - html

Question

I have two footers at the bottom of my page. I want one of them to always be fixed, then when i scroll to the bottom I want the other to pop-up under it so basically when I reach the bottom of the page, the "normal" footer should be under the fixed footer. Here is what I have so far I'm using the navbar bootstrap class to fix it to the bottom. So what this code does now is when i reach the bottom, the fixed footer is the bottom footer, I want it the other way around.
<footer class="footer" role="footerinfo">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="col-sm-12">
//When I reach the bottom this shoud be top footer
</div>
</div>
</div>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
//Should not be fixed, be below fixed
</div>
</div>
</div>
</div>
</footer>
Anyone know what kind of css styling i need to fix this

Answer 1

I put together a solution that doesn't use any javascript. Is this what you were looking for?
https://jsfiddle.net/j611yLem/3/
Here is the CSS I used:
body {
padding: 0;
margin: 0;
}
.container {
position: relative;
padding-bottom: 40px;
}
.first-footer {
position: fixed;
bottom: 0;
background: red;
left: 0;
right: 0;
padding: 10px;
color: #FFF;
}
.second-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: blue;
padding: 10px;
color: #FFF;
}
Essentially, you have the first footer be fixed in position, and the second footer absolutely positioned to the bottom of the container.
I wasn't sure if you meant positioned on top of the footer (hiding it) or slightly above. If you want the second footer to cover the first, change the bottom padding of the container to 0px.

Answer 2

I think this person's question could help you do exactly that: Stop fixed position at footer
Basically the footer stays fixed until it's within a certain range then the css style changes to absolute. Take a look at the live demo from the top rated answer.
Check the offset when you scroll:
$(document).scroll(function() {
checkOffset();
});
Make the position absolute within a certain range, you'll need to tweak this yourself.
function checkOffset() {
if($('#social-float').offset().top + $('#social-float').height()
>= $('#footer').offset().top - 10)
$('#social-float').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('#social-float').css('position', 'fixed'); // restore when you scroll up
}
And whatever you use instead of #social-float will need to be a sibling of the footer:
<div class="social-float-parent">
<div id="social-float">
something...
</div>
</div>
<div id="footer">
</div>
I hope this helps. Their question is extremely similar to yours so I didn't want to re-invent the solution.