I want to make the menu sticky

Question

I'm using helix3 template and I want to make the menu sticky to the top of the page, and to change its style when scrolling. how can I achieve that!

Answer 1

Based on the template demo and , I put together a quick solution using jQuery and CSS, but if your template has been customized, this might not work as expected:

CSS

.fixedMenu {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
}

jQuery

jQuery(window).bind('scroll', function () {
    if (jQuery(window).scrollTop() > 90) {
        jQuery('#sp-header').addClass('fixedMenu ');
    } else {
        jQuery('#sp-header').removeClass('fixedMenu ');
    }
});

Answer 2

Having done a quick Google search (hint), I believe the Helix 3 templates supports a fixed/sticky header in the Template Options: