Friday 11 October 2013

Create A Sticky Menu In Magento

Add Following in code in template/catalog/navigation/top.phtml

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

<style type="text/css">
.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}
</style>

<script type="text/javascript">
                       jQuery(document).ready(function() {
                       var stickyNavTop = jQuery('.nav-container').offset().top;
               var stickyNav = function(){
                var scrollTop = jQuery(window).scrollTop();
                if (scrollTop > stickyNavTop) {
                    jQuery('.nav-container').addClass('sticky');
                } else {
                    jQuery('.nav-container').removeClass('sticky');
                }
            };

            stickyNav();
            jQuery(window).scroll(function() {
                stickyNav();
            });
        });
             
</script>

No comments:

Post a Comment