Footer reveal on scroll

Want to share a tip on this as I faced a problem with Safari.
(read a bit about this in the forums but didn’t find a clear answer)

A footer that reveals as you scroll. You need a fixed footer with height, a z-index of for ex 1 and you need a wrapper for the content with a z-index of 2 with margin bottom that is the same value as the footer. This works in Chrome, for it to work in Safari and Firefox and iOS you need to put a div above the footer.

Here’s the test site: http://footer-reveal-on-scroll.webflow.io
Play with it: https://preview.webflow.com/preview/footer-reveal-on-scroll?preview=7a95830dc42d1ae85b063a9d57fb37a3

I tried lots of things including this one: http://codepen.io/angusjtait/pen/hCAuL
I’m sure there are other solutions but this seemed simple even if it’s a little dirty.

Hope it can help somone :grinning:

4 Likes

@jorn thank but it seems those links don’t work any longer. Would love to see how you did it!

Ah yes, you sometimes need clean some sites up. I can see what I can do :slight_smile:

Here you go :slight_smile:

Designer preview

Try it!

Hope it helps and have a nice weekend :beers:

3 Likes