Sticky Atom Documentation

Make elements remain at the top of the page even when a user scrolls the page, like a sticky navigation. See how Sticky can be designed beautifully on Demo Page.
Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Plaftforms: Grav, Joomla and WordPress

Steps:

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

The Tag Attributes field gives you the ability to quickly apply HTML tag attributes to the block. This can include a variety of things from a style attribute (pictured above) to a tag used to apply JavaScript effects to the block. See more info here Using Block Settings

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: show-on-up: true

Responsive

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.

Final

Add 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;

to create a sticky navigation with slide top animation, responsive and sticky on scroll up. You can find more option for sticky element here https://getuikit.com/docs/sticky

Comments

  1. Avatar

    Hi! Ok, I use mine template, the this is when I use stiky menu the links not work well. Seem like: website.com/#noticias or website.com/#unasigned . I used too zmagacine template, but, the random images not see in all pages.
    I am trying both, but none has worked well for me and I want to use stiky menu.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>