The Slideout Footer

Chris Coyier, after seeing the footer on a site called The Markup:

The footer is clever, in how it appears to slide out from underneath the content as you scroll to the bottom of the page. Let’s make it!

Scroll to the very bottom in this pen to see the footer appear from underneath the content:

The trick is to have the footer:

  1. Stick to the bottom (using position: sticky;)
  2. Be the last item on the page

That way, as there’s no content below the footer, it can only keep on sticking to the bottom 🙂

The Slideout Footer | CSS-Tricks →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.