A few months ago I created some really nice Gantry 5 particles and released them for free, and as I promised back then, I will be releasing many more in the future. So you might really want to like us on Facebook or follow us on Twitter so you never miss a freebie :)
During the last few months I saw many users asking for a fixed/sticky header solution for their Gantry 5 websites. Last summer I wrote a tutorial for the Gantry Blog covering this topic, but now it is quite outdated and no longer the best solution.
So, I wondered, how could I provide a solution for this highly requested feature which at the same time will be very easy to implement, will provide all the options a user might need, will have the cleanest possible code and will work with all Gantry 5 themes and templates and thus the idea for the fixed/sticky atoms was born :)
I'm really happy to present to you the Fixed Header and Headroom.js atoms for Gantry 5. Let's take a closer look at them and see exactly what they do...
"Fixed Header" Atom
The "Fixed Header" atom takes the CSS selector you specify (it will usually be #g-navigation or #g-header) and loads a few lines of jQuery and CSS. The jQuery code does the following:
- It wraps the specified HTML element with another DIV so your page does not "jump" when the header gets fixed.
- It checks when the specified HTML element touches the top of the screen and adds the "g-fixed-element" class.
- When scrolling back up, it checks when the specified HTML element reaches its original place and removes the "g-fixed-element" class.
- If the option is enabled, it checks the device width and decides if the "g-fixed-element" class should be added or not.
- If the option is enabled, it adds a second class ("g-fixed-second") when the user scrolls the specified number of pixels.
Then, the CSS code just makes the "g-fixed-element" element fixed. Optionally, you can add your own custom CSS in the custom.scss file using the "g-fixed-second" class and apply whatever effect you want.
"Headroom.js" Atom
The "Headroom.js" atom basically does the same thing as the "Fixed Header" atom but additionally it loads the Headroom.js script and provides some really nice options. For example, with the "Animation" option, you can specify how the fixed element will get hidden - by sliding, swinging, flipping or bouncing :)
Well, that's all for now. For more details check the demo videos below, download the atoms, and play with them! And of course, don't be shy to use the comment form below :) Enjoy!
Fixed Header Atom
The "Fixed Header" atom takes the HTML element you specify and makes it fixed to the top of the screen when the visitor scrolls.
Demo Video Documentation Download
Headroom.js Atom
The "Headroom.js" atom loads the "headroom.js" script and provides some really nice options for your fixed/sticky header. You can choose different animations - slide, swing, flip and bounce.
Demo Video Documentation Download