Make a section cover part of the header on scroll

My page has a fullwidth sticky header with three elements: an icon in the extreme left, a logo in the middle and a menu icon in the extreme right. Underneath this header are a number of sections with containers that have a max width limiter so that no content is ever directly under the icon and the menu.

Right now, the entire header content remains visible as I scroll. What I want is for the containers underneath to cover the logo in the middle as I scroll down while the header itself stays fixed (and hence the icon and the menu on each flank are always visible). How can I achieve that?

For that to happen you want to start by looking at “While Page is Scrolling” interaction under page interaction. You can set Show/Hide for the logo in the middle when user starts scrolling down based on % scrolled.

So for example if you set it to show at 1%, hide at 2%, when the user scroll bar hits the top the logo will always show, and once they start scrolling down past 2% scroll the logo will always be hidden. Hope this gives you an idea where to start.

1 Like

Thank you very much!

1 Like