1

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?

6

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);
  • How can we add easing to this? – loeffel Jul 13 '15 at 15:41

Not the answer you're looking for? Browse other questions tagged or ask your own question.