Magento – Fixed Header and Mega Menu

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);

You just have to put the content of your new header in your current theme, Magento will take it first (Magento Fallback system), you don't need to remove it.

your header content will be in :

app/design/frontend/{Vendor}/{theme}/Magento_Theme/templates/html/header.phtml