0

i want to create footer like footer on elementaryos.org i don't know what css code that make the footer below the page container and will be unveiled when we scroll it down.

<!doctype html>
<html lang="en">
<head>
    <title>Test page</title>
    <style type="text/css">
    body{
        margin: 0px;
        padding: 0px;
    }
    nav{
        background-color: yellow;
        width: 100%;
        position: fixed;
        z-index: 2;
        height: 70px;
    }
    .container{
        padding-top: 80px;
        width: 100%;
        background-color: #dadada;
        position: relative;
        z-index: 1;
        line-height: 3em;
    }
    footer{
        background-color: #bababa;
        height: 200px;
        width: 100%;
        position: relative;
        z-index: 0;
    }
    </style>
</head>
<body>

<nav>
<h1>Navigation</h1>
</nav>

<div class="container">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum enim odio, vel placerat dui aliquam sed. Vivamus rhoncus massa commodo nulla scelerisque accumsan. Nunc ac ligula velit. Mauris eu pharetra turpis, eget fermentum lectus. Maecenas ornare sem vel nisi accumsan, at placerat libero vulputate. Pellentesque sit amet neque ac est dapibus faucibus. Morbi pellentesque, dolor ut elementum mattis, lectus nunc auctor nulla, vel lobortis quam ante eu neque.

Mauris sed ligula in lorem rhoncus volutpat. Ut pulvinar dolor id bibendum mollis. Morbi eu facilisis risus. Nullam quis eros elit. Donec quis facilisis dui. Duis hendrerit, lectus id ultrices tincidunt, urna tellus convallis quam, eget vehicula ipsum arcu vitae nulla. Etiam tristique varius enim nec volutpat. Fusce non odio nec massa placerat aliquam id eu ligula. Nam nulla urna, iaculis sit amet nisi non, auctor congue magna. Suspendisse potenti. Duis vehicula consectetur feugiat.

Quisque ut luctus diam. Aliquam quis blandit eros. Vestibulum dolor velit, egestas non vehicula et, viverra in lacus. Donec luctus id libero at tincidunt. Donec in euismod tortor, id fermentum mi. Phasellus leo dui, placerat sed enim elementum, aliquet convallis mauris. Duis cursus mauris vehicula tortor auctor faucibus. Praesent euismod enim eget luctus facilisis. Donec condimentum, neque id convallis consectetur, lorem ipsum gravida nisl, vel fermentum lectus diam at magna. Aenean in urna sagittis, condimentum magna nec, egestas neque. Nulla gravida neque massa.

Nulla consequat, quam at fringilla mollis, nunc magna dapibus eros, ut ultrices sapien mauris eu libero. Duis sollicitudin orci posuere est vulputate, eu vestibulum mi vestibulum. Etiam eu elementum nisi, consectetur accumsan turpis. Sed dignissim sapien et posuere interdum. In adipiscing gravida enim vestibulum suscipit. Aliquam aliquet sem et dapibus mollis. Praesent quis lorem augue. Donec facilisis justo vel est pharetra, eget rhoncus magna ultricies. Suspendisse ac justo quis dui accumsan dignissim at non sapien. Cras vitae ultrices justo, quis venenatis nibh. Sed vestibulum adipiscing enim non volutpat. Duis ac euismod sapien. Pellentesque sit amet ornare velit. Duis venenatis tempus facilisis.

Sed sem lectus, mattis ut nunc sit amet, dictum sollicitudin sapien. Integer vitae ornare tellus. Vestibulum et cursus urna, vel aliquet mi. Duis lacinia tincidunt lorem. Cras sem felis, bibendum eu lorem luctus, dictum imperdiet augue. Quisque eleifend lectus pellentesque arcu faucibus tempus. Etiam sollicitudin in est eu lacinia. Curabitur faucibus in neque et imperdiet. Mauris libero enim, suscipit sit amet odio eget, molestie ornare ligula. Nam a lorem convallis, ornare nibh id, viverra tellus. 
</div>
<footer>
    Page footer
</footer>
</body>
</html>

here is the demo. Thanks a lot.

user1677104
  • 317
  • 1
  • 2
  • 7
  • This Fiddle: http://jsfiddle.net/zVLrb/ shows how it could be done. It was mentioned at http://stackoverflow.com/questions/13095684/footer-behind-content – Bas van Dijk Dec 02 '13 at 22:58

2 Answers2

3

There you go: http://jsfiddle.net/8cxvr/2/

It's pretty simple, just give the footer a fixed position (= relative to window) and the container gets some margin on the bottom.

Relevant changes:

.footer {
  position: fixed;
  bottom: 0;
}
.container {
  margin-bottom: 200px; /* footer-height */
}
Cedric Reichenbach
  • 8,970
  • 6
  • 54
  • 89
0

To start, that is a horrible effect, please don't do that.

For a complete answer though, what they did is fixed the footer with positioning at the bottom of the page, and then gave it a lower z-index. So it's always at the position. Once you scroll past the content, the it comes into view. You can use a tool like IE Developer tools, or Firebug (for Firefox) to look at how they worked the code.

David
  • 4,744
  • 5
  • 33
  • 64
  • Why is this a horrible effect? I like it. I've seen some similar thing on a Unity3d demo page, but cannot find it right now... – Cedric Reichenbach Dec 02 '13 at 23:01
  • i use developer tools on firefox but couldn't figure out what css rule do that effect. btw, i like that effect, not that horrible to me – user1677104 Dec 02 '13 at 23:04
  • @CedricReichenbach Because, I didn't quite scroll far enough, and now it just looks ugly and like there's a bug http://i.imgur.com/0WX6SPD.png – David Dec 02 '13 at 23:05
  • @user1677104 If you click on the
    you'll see that it's absolutely positioned. If you look at the first child inside the footer, you'll see it has fixed positioning.
     – David Dec 02 '13 at 23:06
  • the way that footer in the fiddle is revealed is EXACTLY like an unveiling. Its as if the web page is lifted up to 'unveil' the footer beneath. The pop-up footers are extremely intrusive imo, especially on mobile when your pixels are limited – Justin Dec 02 '13 at 23:36
  • @Justin What do you mean by "pop-up footers"? – Cedric Reichenbach Dec 03 '13 at 15:00