A Pen by Perry Azevedo.

index.html

<div id="wrapper">
  
  <header>
    
    <h1>Logo</h1>
    
    <nav>
      <ul>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
      </ul>
    </nav>
    
  </header>
  
  <section>
    <h2>Section Header 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam scelerisque purus vel semper dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet vulputate massa. Morbi viverra suscipit velit non blandit. Donec tortor est, fringilla in consectetur quis, ornare et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </section>
  <section>
    <h2>Section Header 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam scelerisque purus vel semper dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet vulputate massa. Morbi viverra suscipit velit non blandit. Donec tortor est, fringilla in consectetur quis, ornare et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </section>
  <section>
    <h2>Section Header 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam scelerisque purus vel semper dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet vulputate massa. Morbi viverra suscipit velit non blandit. Donec tortor est, fringilla in consectetur quis, ornare et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </section>
  <section>
    <h2>Section Header 4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam scelerisque purus vel semper dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet vulputate massa. Morbi viverra suscipit velit non blandit. Donec tortor est, fringilla in consectetur quis, ornare et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </section>
  
</div>

<footer id="site-footer">
  <div class="footer-wrapper">
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
      <li>Link 6</li>
    </ul>
    <p>Lots of text</p>
    <p>Lots of text</p>
    <p>Lots of text</p>
    <p>Lots of text</p>
    <p>Lots of text</p>
    <p>Lots of text</p>
    <p>Lots of text</p>
    <p>Lots of text</p>
  </div>
</footer>

script.js

YUI().use('node', 'event', function (Y) {
  
  
  var siteFooter = Y.one('#site-footer'),
      getFooterHeight = siteFooter.get('offsetHeight'),
      footerHeight = getFooterHeight + '.px';
  
  Y.one('#wrapper').setStyle('margin-bottom', footerHeight);
  
});

Sliding-Revealed-Footer.markdown

Sliding Revealed Footer

The footer is fixed to the bottom of the website and the z-index is set behind the primary website content. This way, it is revealed as the user scrolls, sliding the primary content away to reveal the footer underneath.

A Pen by Perry Azevedo on CodePen.

License.

style.scss

@import "bourbon";
// Set all elements to Border-box sizing
*, *:before, *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

$siteWidth: 800px;
$sitePadding: 40px;

html {
  background-color: #eee;
}

body {
  background-color: #eee;
  width: 100%;
  
  z-index: 0;
}

#wrapper {
  position: relative;
  max-width: $siteWidth;
  margin: 0 auto;
  padding: 20px $sitePadding;
  background-color: #e5e5e5;
  
  z-index: 1;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 100px 0;
  background-color: #333;
  color: #eee;
  
  z-index: -1;
  
  ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
      display: inline-block;
    }
  }
}

.footer-wrapper {
  max-width: $siteWidth;
  margin: 0 auto;
  padding: 0 $sitePadding;
}