david david - 1 year ago 107
CSS Question

Scroll to show footer

I have been trying to use parallax, to hide and show footer on scroll but due to the fact it targets the img this does not work.

i wrote this but it just pops up rather then the main content page sliding up to reveal the footer slowly.


$(window).on('scroll', function() {
if ($(window).scrollTop() > 85) {
} else {

here is any example: http://red-team-design.com/simple-and-effective-dropdown-login-box/

scroll to bottom to see the footer slide out.

Is there a pure css way of doing it? am i missing a trick here.
Thanks for your help


Answer Source

Yes, that's pure css. Just need to put that position: fixed and z-index: 0, so like:

.footer {    
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;

and the main content position: relative and z-index: 1

.main-content {    
    position: relative;
    z-index: 1;

Here is the jsFiddle: https://jsfiddle.net/7uv2fzvp/11/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download