Here is my footer code.
<div class="row">
<div class="col-md-12">
<div> the part that always showing at the bottom </div>
</div>
<div class="col-md-12">
<div> show only if the user reaching the bottom of the page </div>
</div>
</div>
My problem is I want my footer stick to the bottom of the page until the user reach the bottom, then show the other content.
With only the help of CSS, you can reconsider it as two footers, one popping, another boring ;)
[id^=foo]{
background:orange;
padding:5px;
font-size:25px;
}
#foo-boring{
position:fixed;
bottom:0;
right:0;
left:0;
}
#foo-pop{
position:absolute;
height:70px;
right:0; left:0;
}
<div>SCROLL ME DOWN<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br>much contents there.<br> END.</div>
<div id="foo-pop"><b>POP!1!!!1!!1!11!</b></div>
<div id="foo-boring">The boring footer.</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With