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.
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
