A sticky header or section can be very useful when you have longer pages as this will allow your site visitors to access your navigation or other important section while scrolling through your page. This can be especially helpful in a sales page where you may have links at the top that jump to different areas of your page such as FAQ, Features, Testimonials, Pricing, etc.
Follow these steps to make your header/section stick to the top of the page
Once you create the section within the OptimizeBuilder that you want to stick to the top of the page, simply click on that section to open the inline editing toolbar
Then click the gear icon to open settings
Then click “Advanced Options”
You will now see the Advanced Options sidebar open on the left side of the editor. You’ll want to click on “Sticky Feature”
Turn on the Sticky Feature by clicking the on/off toggle.
Customize the Sticky Feature Display Options
By default, the section will stick until the end of the page, and will not be sticky on mobile devices due to the limited amount of space, but you can change how that works.
If you want to change if the sticky feature works on Desktop, Tablet, or Mobile, you can do that by clicking the icons for Desktop, Tablet, or Mobile. The icons highlighted in blue means that the sticky feature will be active on those devices.
Sometimes you may not want the sticky feature to stick right at the top, and may want to add some space to it. You can do so with the next option under “Sticky Feature” by setting how many pixels from the top of the page you want to have the section stick
The “Stick Until” option can be quite useful. By default the section will stick to the “End of page.” If you want to choose a specific element or only till the end of the parent container, then you can choose from the drop down under “Stick Until.”
How to Stop the Sticky Feature at a Specified Element
If you choose “Specific Element” then you will need to click on the element you want to stop the sticky feature on, and get the Element Class.
Here is how to get the Element Class. You’ll first want to click on the element where you want the sticky feature to stop.
1) Then click the gear icon to open the settings
2) Then click the blue “Advanced Options” button
3) Then click “Advanced” on the left element sidebar
4) Then type in a CSS Class (in this example we used “stopsticky”)
Now, we need to go back to the sticky section
1) Click on the settings icon
2) Click the blue “Advanced Options” button
3) Go back to the Sticky Feature
4) put the CSS class we created under “Element Class”
Now you’ll want to save your page and check that it works properly (please clear your cache and browser cache).
You should see the section stick to the top, and if you selected an element (a headline element in this case) then the sticky section should disappear as you scroll past it, and then reappear when scrolling back up as you see in this gif animation:
If you have any questions or run into any problems while trying to set this up, please reach out to the team here and we’ll be happy to help.