How to add sticky (floating) menu in Magento 1.9?

Question

I want add a sticky menu (Floating) on top of pages when the page scroll down but the top menu stay on top of browsers and mobile devices.

How to achieve this result in Magento 1.9.x?

Answer 1

Welcome to Magento.SE!

While this is not necessarily a Magento question (it's really more a CSS/jQuery question) there is a particular way that I would handle this in CE1.9+

In your own custom styles.css file:

.sticky { 
    position: fixed;
    top: 0;
    z-index: 9999;
}

And now in a custom javascript I would include the following:

(function($, w){
    $(function(){
        var $nav = $('#header-nav');
        var stickyNavTop = $nav.offset().top;

        var stickyNav = function(){
            var scrollTop = $(w).scrollTop();

            if (scrollTop > stickyNavTop) { 
                $nav.addClass('sticky');
            } else {
                $nav.removeClass('sticky');
            }
        };

        $(w).scroll(function() {
            stickyNav();
        });

        stickyNav();
    });
})($j, window);