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 →

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.