cancel
Showing results for 
Search instead for 
Did you mean: 

Where do i have to put this java script code for customizing navigation?

Where do i have to put this java script code for customizing navigation?

I want to put javascript codes for implementing sticky(floating) navigation like this,

 

 

 

Fortunately, i found the site whoes navigation i've wished is implemented on. You can reference this site: http://www.cocoscarf.com/

 

btw mini cart and top menu on our website,the both of them are located in diffrent phtml file.

 

enter image description here

Could you let me know which file i have to put the javascript code?

 

 

jQuery(function($) {

        var StickyHeader = {

            stickyThreshold : 960 
            , isSticky : false
            , isSuspended : false
            , headerContainer : $('.header-container')
            , stickyContainer : $('.sticky-container')  //.nav-container
            , stickyContainerOffsetTop : 55 //Position of the bottom edge of the sticky container relative to the viewport
            , requiredRecalculation : false //Flag: required recalculation of the position of the bottom edge of the sticky container

            , calculateStickyContainerOffsetTop : function()
            {
                //Calculate the position of the bottom edge of the sticky container relative to the viewport
                StickyHeader.stickyContainerOffsetTop = 
                    StickyHeader.stickyContainer.offset().top + StickyHeader.stickyContainer.outerHeight();

                //Important: disable flag
                StickyHeader.requiredRecalculation = false;
            }

            , init : function()
            {
                StickyHeader.hookToActivatedDeactivated(); //Important: call before activateSticky is called
                StickyHeader.calculateStickyContainerOffsetTop();
                StickyHeader.applySticky();
                StickyHeader.hookToScroll();
                StickyHeader.hookToResize();

                if (StickyHeader.stickyThreshold > 0)
                {
                    enquire.register('(max-width: ' + (StickyHeader.stickyThreshold - 1) + 'px)', {
                        match: StickyHeader.suspendSticky,
                        unmatch: StickyHeader.unsuspendSticky
                    });
                }
            }

            , applySticky : function()
            {
                if (StickyHeader.isSuspended) return;

                //If recalculation required
                if (StickyHeader.requiredRecalculation)
                {
                    //Important: recalculate only when header is not sticky
                    if (!StickyHeader.isSticky)
                    {
                        StickyHeader.calculateStickyContainerOffsetTop();
                    }
                }

                var viewportOffsetTop = $(window).scrollTop();
                if (viewportOffsetTop > StickyHeader.stickyContainerOffsetTop)
                {
                    if (!StickyHeader.isSticky)
                    {
                        StickyHeader.activateSticky();
                    }
                }
                else
                {
                    if (StickyHeader.isSticky)
                    {
                        StickyHeader.deactivateSticky();
                    }
                }
            }

            , activateSticky : function()
            {
                var stickyContainerHeight = StickyHeader.stickyContainer.outerHeight();
                var originalHeaderHeight = StickyHeader.headerContainer.css('height');

                //Compensate the change of the header height after the sticky container was removed from its normal position
                StickyHeader.headerContainer.css('height', originalHeaderHeight);

                //Trigger even just before making the header sticky
                $(document).trigger("sticky-header-before-activated");

                //Make the header sticky
                StickyHeader.headerContainer.addClass('sticky-header');
                StickyHeader.isSticky = true;

                //Effect
                StickyHeader.stickyContainer.css('margin-top', '-' + stickyContainerHeight + 'px').animate({'margin-top': '0'}, 200, 'easeOutCubic');
                //StickyHeader.stickyContainer.css('opacity', '0').animate({'opacity': '1'}, 300, 'easeOutCubic');
            }

            , deactivateSticky : function()
            {
                //Remove the compensation of the header height change
                StickyHeader.headerContainer.css('height', '');

                StickyHeader.headerContainer.removeClass('sticky-header');
                StickyHeader.isSticky = false;

                $(document).trigger("sticky-header-deactivated");
            }

            , suspendSticky : function()
            {
                StickyHeader.isSuspended = true;

                //Deactivate sticky header.
                //Important: call method only when sticky header is actually active.
                if (StickyHeader.isSticky)
                {
                    StickyHeader.deactivateSticky();
                }
            }

            , unsuspendSticky : function()
            {
                StickyHeader.isSuspended = false;

                //Activate sticky header.
                //Important: call applySticky instead of activateSticky to check if activation is needed.
                StickyHeader.applySticky();
            }

            , hookToScroll : function()
            {
                $(window).on("scroll", StickyHeader.applySticky);
            }

            , hookToScrollDeferred : function()
            {
                var windowScrollTimeout;
                $(window).on("scroll", function() {
                    clearTimeout(windowScrollTimeout);
                    windowScrollTimeout = setTimeout(function() {
                        StickyHeader.applySticky();
                    }, 50);
                });
            }

            , hookToResize : function()
            {
                $(window).on('themeResize', function(e) {

                    //Require recalculation
                    StickyHeader.requiredRecalculation = true;

                    //Remove the compensation of the header height change
                    StickyHeader.headerContainer.css('height', '');
                });
            }

            , hookToActivatedDeactivated : function()
            {
                //Move elements to sticky header
                $(document).on('sticky-header-before-activated', function(e, data) {

                    jQuery('#nav-holder1').prepend(jQuery('#mini-cart'));
                    jQuery('#nav-holder2').prepend(jQuery('#mini-compare'));

                }); //end: on event

                //Move elements from sticky header to normal position
                $(document).on('sticky-header-deactivated', function(e, data) {

                    //Move mini cart back to the regular container but only if mini cart is inside the menu holder
                    if (jQuery('#mini-cart').parent().hasClass('nav-holder'))
                    {
                        jQuery('#mini-cart-wrapper-regular').prepend(jQuery('#mini-cart'));
                    }

                    //Move mini compare back to the regular container but only if mini compare is inside the menu holder
                    if (jQuery('#mini-compare').parent().hasClass('nav-holder'))
                    {
                        jQuery('#mini-compare-wrapper-regular').prepend(jQuery('#mini-compare'));
                    }

                }); //end: on event
            }

        }; //end: StickyHeader

        StickyHeader.init();

    }); //end: on document ready
1 REPLY

Re: Where do i have to put this java script code for customizing navigation?

You can place it inside footer.phtml file of your theme

The expected path will be Theme_Folder/template/page/html/footer.phtml

If you don't find the file at this path you can copy it from the theme where your active theme fallback(depending on your settings). Also as it is related to navigation bar then you can place it at other places as well which are commonly loaded in theme but placing it in footer has below advantages

1. This doesn't interfere or produces any issue in loading above the fold content.
2. You can also save yourself with some of the google page speed pointers like blocking javascript and prioritize visual content.
3. Footer is generally common(unless specific requirements) so placing it in one place will work for all pages and it is recommended to put your js in the bottom of a page.