Sticky Header on Scroll with Gridbox. Download Demo Page for Free!

Sticky Header on Scroll with Gridbox

Today we have prepared for you a new tutorial. We gonna show you how to create modern Sticky Header with Gridbox, CSS and JavaScript as on the animation above. Let's Rock your Header and make it beautiful!

Demo - Sticky Header on Scroll

As you can see on the demo, initially header placed at the bottom of the screen. Once you scroll to the header, the header becomes sticky and gets fixed on the page top.

Class Suffix and Custom CSS

In order to place the site navigation at the bottom of the screen, open Header Settings and add class suffix sticky-menu in the field Class Suffix.

Open Gridbox CSS Editor.

Gridbox CSS Editor

Copy CSS code below and paste into the Gridbox CSS editor

@media (min-width: 769px){
    .sticky-menu {
        display: block;
        position: absolute !important;
        top: 100vh;
        transform:translateY(-100%);
        -webkit-transform:translateY(-100%);
        width: 100%;
        z-index: 10;
    }

    .sticky-menu.fixed-sticky-menu {
        position: fixed!important;
        top: 0;
        transform: none;
        -webkit-transform: none;
    }
}

Custom JavaScript

Open Gridbox JavaScript Editor.

Javascript CSS Editor

Copy JS code below and paste into the Gridbox JavaScript editor.

jQuery("document").ready(function($){
    var nav = jQuery('.sticky-menu'),
        screen = jQuery(window).height() - nav.innerHeight();
    jQuery(window).scroll(function () {
       if (window.pageYOffset > screen) {
            nav.addClass('fixed-sticky-menu')
        } else {
            nav.removeClass('fixed-sticky-menu')
        }
    });
});


That's all Folks! By the way, you can download demo theme from this tutorial and import it to your Gridbox website.


Demo - Sticky Header on Scroll with Gridbox

Download Demo Page

See you next week with new Tip and Trick for Joomla! website builder Gridbox.