Question

I’m trying to do a footer the shows behind the content when scrolling towards the end of the website, it’s hard to explain so I did this gif

http://imageshack.us/f/687/newdw.gif/

I’ve tried to search around the web for tutorials and what I find is not what I’m looking for (all I’ve seen is slide up and slide down footer).

Would help a lot, if you can point me to a tutorial or explain how to do it.

Answer 1

The following should do what you want, using only css.

http://jsfiddle.net/zVLrb/

This solution relies on the way elements with position:fixed behave. This code will mean that on shorter pages – i.e. ones that do not cause a scroll bar to appear, the footer will remain fixed to the bottom of the page, rather than the content.

Basically the footer is always attached to the bottom of the window/viewport, as the user scrolls, but for the majority of the time you can’t see it because the rest of the page is floating above it – this is caused by using a higher z-index for the page content than the footer. By using a bottom margin the same height as the footer, we allow a space for the footer to appear, but only at the bottom of the page. 🙂

This should work fine for all modern browsers, however you should test in IE7 just to make sure (as I don’t have that to hand right now).

css

.rest {
    position: relative;
    z-index: 100;
    background: #fff;
    margin-bottom: 200px;
    overflow: hidden;
}

.footer {
    height: 200px;
    width: 100%;
    background: #000;
    position: fixed;
    bottom: 0;
    z-index: -1;
    color: white;
    text-align: center;
    font-size: 20pt;
}

.footer p {
    margin-top: 50px;
}

markup

<div class="rest">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat
    euismod urna, eget interdum eros elementum in. Morbi dictum molestie
    porta. Morbi eget consectetur nibh. Etiam sed arcu ac elit dignissim
    consequat.
  </p>
  <!-- obviously this content would need to go on for longer to 
       cause the page to scroll //-->
</p>
</div>
<div class="footer">
    <p>This is the footer</p>
</div>

update

I can’t quite remember but I think with older Internet Explorer a negative z-index might put the footer below the body layer.. (meaning it wont be visible at all) so it may be best to use z-index:2 for .rest and z-index:1 for the footer. I wont have a chance to test that for a bit, but will update when I can.