Sticky Sections on Top and Footer

Hi there,

Not sure if this is possible but can give it a shot with CSS.

Any chance you can disable the maintenance mode so we can see the page in question?

Thanks!

Hi Leo,

Thank you very much for your message. Sure, if you can press ESC on keyboard before clicking anything on the screen I think you should be able to see the page now.

Cheers :)

So something like this?

#generate-section-1 {
    position: sticky;
    top: 0;
    z-index: 99;
}
#generate-section-6 {
    position: sticky;
    bottom: 0;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Thanks very much really! I just added the Simple CSS plugin and added the code. It worked perfectly for the footer.

A slight problem with the header is that when you scroll down, the sections in the middle go over the header. This doesn't happen with the footer (which has a section background image). I tried adding a background image to the top section as well but it didn't help. Am I missing something?

Addition: I use built-in unsemantic grid (columns) in the the top section; if it's relevant.

Try the edited code:
https://generatepress.com/forums/topic/sticky-sections-on-top-and-footer/#post-758528

Worked awesome, thank you very much Leo! :)

Glad I could help :)

Just as an update, this code works really nice as in even making the second section sticky so that creates a nice experience.

However I’m not sure if its me but I realised the stickies might not be working at all on iOS.

Hi there,

the safari browser needs a prefixed version of the sticky property. Include this within the CSS Rule above the current position property:

position: -webkit-sticky;

Thank you very much David :)

This is the final code I added to Simple CSS and seems to work fine on both Android and iOS.

#generate-section-1 {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 99;
}
#generate-section-6 {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
}

Cheers

You're welcome