Streaming live at 10am (PST)

Footer scrolling over fixed content


#1

Hi Everyone.

Need some expert help please.
I have a fixed element on this page “THE SH%T THAT WE’VE DONE” on the left but the footer scrolls over it when you reach the bottom of the page.

How do I stop this form happening?

Thanx in advance.


#2

Hi @slkuypers

Thanks for reaching out about your issue with the fixed header and footer overlap.

You say that:

the footer scrolls over it when you reach the bottom of the page

Isn’t that what you actually want to happen? What I see is that the heading is remaining on top of the footer and covering your logo and links.

CloudApp

If you want the heading to appear below the footer, select the footer and change it’s position to relative, then set a z-index with a high value to ensure that the footer is now placed above all other content on your page.

CloudApp

Note that I added some text shadow effects to better illustrate what’s happening.

Hope this is helpful. If you have any other questions, please don’t hesitate to reach out again.


#3

Thanx for your quick reply Anna : )

What I would actually like, is for the footer to stop just before it reaches the content like this.

But I guess that’s counterintuitive as you can then not see the footer content.
mmm. I will probably have to relook the functionality of the page completely.

Silly me.


#4

Hi again @slkuypers

That’s not silly. It’s just a bit more complicated. You’ll need to use interactions and a piece of custom code to stop the heading from scrolling once the footer is in view.

This tutorial can help you set that: https://webflow.com/blog/build-a-sticky-aside-in-webflow

Hope this is helpful.


#5

You’re a star. Thank you so much. Will give it a go.


#6

I think there might also be a method where you don’t even need interactions.

You can make the header ‘sticky’ instead of ‘fixed’ using this custom code:

<style>
  .class-name-here {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 50px;
  }
</style>