How to reveal element by scrolling?

Question

I'm trying to make an effect similar as used on http://www.t-mobile.com/ , when the user scrolls down to the bottom of the page they reveal the "footer" more and more as the user keeps on scrolling.

I've tried to search both here and on google but haven't been able to find anything that's really useful. Most examples only shows/hide the footer once the user scrolls to the bottom.

So my question is, what's the effect called to reveal an element by scrolling? Are there any good tutorials / blog posts about this? All help I can get is much appreciated!

Answer 1

As I commented, you need to make your element fixed, so as explanation goes, I have two elements here, one is a normal position: relative; element, so nothing fancy about that, I assigned relative so that I can make the z-index work

Second element is positioned fixed and also, make sure you use margin-bottom which should be equal to the height of your footer, no need to assign any negative z-index whatsoever to this element.

Demo

Not much HTML ...

<div></div>
<div>Reveal Me</div>

CSS

/* These are for your main site wrapper */
div:first-child {
    height: 800px; /* Even auto is fine, I 
                      used fixed height because I don't have any content here */
    background: #eee;
    margin-bottom: 200px; /* Equals footer wrappers height */
    z-index: 1;
    position: relative;
}


/* These are for footer wrapper */
div:last-child {
    background: #aaa;
    height: 200px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

---

For Dynamic Sizes

Note that am using a fixed height for the fixed positioned element, if you have variable height in footer element, than you need to use JS or jQuery to calculate the height using

$('#wrapperElement').css('margin-bottom', $('#footer').height());

Here, the selectors of #wrapperElement and #footer are my assumed ones, you can replace those with the your own selectors.

---

Something about fixed element - Horizontal Centering (I think it will be helpful to some users)

When you will make your element fixed, it will get out of the document flow, so if you are assigning fixed to the wrapper of footer element and want to center some content in there, than nest another element inside that wrapper and use width and margin: auto; for that...

Demo 2

HTML

<div></div>
<div>
    <div>Reveal Me</div>
</div>

CSS

body > div:first-child {
    height: 800px;
    background: #eee;
    margin-bottom: 200px;
    z-index: 1;
    position: relative;
}

body > div:last-child {
    background: #aaa;
    height: 200px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

body > div:last-child div {
    width: 80%;
    margin: auto;
    outline: 1px solid red; /* To show that element is horizontally centered */
}

---

Note: Selectors used in this answer are too general and are good for quick demonstration purposes, in real projects, make sure you use specific selectors