Rather than sliding away the whole menu, sometimes it is nice just to hide some extra content above it.
This may be additional resources, links or contact information.
On this page, the Sliding Header is shown and hidden using scroll detection. The header is hidden when the page is scrolled down by 200 pixels and re-shown when the page is scrolled back up by 100 pixels.
The social links at the bottom use exactly the same settings except the position is set to bottom rather than top. Chroma automatically handles the reversal of direction.
This page is using Scroll Detection with the Chroma Stack
Using Scroll detection, you can have this header appear and disappear as you scroll up and down the page
Using Marker detection, you can have this header appear and disappear where ever you want.
For instance, the header could only be shown while the main logo is in view at the top of the page.
Equally easily you could show it when the user reaches the bottom of the page as well.
The top scroll away header is just a 1 column stack with the header content in it. You could just as easily use a multi column stack. Chroma will handle the responsive change in size of the header.
ScrollUp Pro also allows you to hide the sliding header for mobile screens if required.
The social links at the bottom are in a fixed Chroma with a scroll triggered slide enabled.
(They are of course just dummy links in this demo)