How to reveal element by scrolling?

css, html, javascript, jquery

Solution

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

Problem

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!

Original source