Headroom Atom Documentation
For sticky built in with Uikit (pure and not using extended js/css), please check the sticky atom.
# Headroom Atom Package contents
|Contains the Headroom Atom settings.
|The Twig file to pull information, settings.
|Contains the Headroom style CSS.
Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.
After you upload this atom, go to your Template/Theme Settings > select the Layout to add Headroom (i.e: Home) -> Page Settings -> Drag the Headroom Atom into Atom Box.
|Define the ID or class of the section that you want to set as fixed.
|Customize the Background background color on scroll.
|Select an animated headroom styling effect on scroll.
|Vertical offset in px before element is first unpinned
|Scroll tolerance in px before state changes
Tips With Gantry 5, you can define the SECTION ID by following: Adding the g- prefix before the section name. Example with navigation section, the section id should be: g-navigation, with header section, the section id should be: g-header and so on.
General, Parallax and Parallax Background tab
Please take a look the documentation here for more detail about these tabs settings