Sticky Atom Documentation
Plaftforms: Grav, Joomla and WordPress
Step 1 Uikit3 for Gantry5 atom installed and active.
Sticky itself is a part of Uikit3 components so make sure the Uikit3 atom installed and enabled via your Gantry5 page settings
Step 2 Make elements/sections remain at the top of the viewport, like a sticky navigation by using Gantry5 Tag Attributes
Navigate to Layout setting tab, then select the section you wish to implement sticky feature, example Navigation section (Just select the settings icon for the block you wish to adjust the settings for.)
Add new Tag Attributes by clicking icon
Add Key/Value field for the section. In this case, add uk-sticky for Key field and the Value field with the sticky attributes(optional) for sticky component. Click apply and save to see the effect.
Sticky on scroll up
You can make the sticky element show only when scrolling up to save space. Together with an animation, this makes for a very smooth experience. Example:
It’s possible to disable the sticky behavior for different devices widths by applying the media option to the attribute and adding the appropriate viewport width. Add a number in pixel, for example
media: 640, or a breakpoint, for example
media: @m. The element will be sticky from the specified viewport width and upwards, but not below.
FinalAdd the value for uk-sticky below
media: 960; show-on-up: true; animation: uk-animation-slide-top; cls-active: uk-navbar-sticky; sel-target: .g-container;