I'm trying to make an effect similar as used on / , 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!

I'm trying to make an effect similar as used on http://www.t-mobile./ , 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!

• javascript
• jquery
• html
• css

Share Follow asked Jul 10, 2014 at 8:18 NordisNordis 74322 gold badges99 silver badges3131 bronze badges 4

• That is nothing but a fixed element – Mr. Alien Commented Jul 10, 2014 at 8:21
• just looks like a fixed div with the main page content that has a higher z-index and a margin on the bottom the size of the footer. – Novocaine Commented Jul 10, 2014 at 8:22
• looks like a fixed div with with lower z-index ;). No javascript needed, just css. Inspecting can show you how it works: i.imgur./os1FluG.png . Note that to make it work you must set the footer div with the lowest z-index. Also, not important, but he is using bootstrap, lol – briosheje Commented Jul 10, 2014 at 8:22
• Thanks for all ments, that was exactly what I needed! :) – Nordis Commented Jul 10, 2014 at 8:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

As I mented, 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