94 lines
2.9 KiB
JavaScript
94 lines
2.9 KiB
JavaScript
|
|
jQuery(document).ready(function($) {
|
|
var mainHeader = $('.cd-auto-hide-header'),
|
|
secondaryNavigation = $('.cd-secondary-nav'),
|
|
// This applies only if secondary nav is below intro section
|
|
belowNavHeroContent = $('.sub-nav-hero'),
|
|
headerHeight = mainHeader.height();
|
|
|
|
// Set scrolling variables
|
|
var scrolling = false,
|
|
previousTop = 0,
|
|
currentTop = 0;
|
|
|
|
const SCROLL_DELTA = 10, SCROLL_OFFSET = 150;
|
|
|
|
mainHeader.on('click', '.nav-trigger', function(event) {
|
|
// Open primary navigation on mobile
|
|
event.preventDefault();
|
|
mainHeader.toggleClass('nav-open');
|
|
});
|
|
|
|
$(window).on('scroll', function() {
|
|
if(!scrolling) {
|
|
scrolling = true;
|
|
!window.requestAnimationFrame
|
|
? setTimeout(autoHideHeader, 250)
|
|
: requestAnimationFrame(autoHideHeader);
|
|
}
|
|
});
|
|
|
|
$(window).on('resize', function() {
|
|
headerHeight = mainHeader.height();
|
|
});
|
|
|
|
function autoHideHeader() {
|
|
var currentTop = $(window).scrollTop();
|
|
|
|
(belowNavHeroContent.length > 0)
|
|
? checkStickyNavigation(currentTop) // Secondary navigation below intro
|
|
: checkSimpleNavigation(currentTop);
|
|
|
|
scrolling = false;
|
|
previousTop = currentTop;
|
|
}
|
|
|
|
function checkSimpleNavigation(currentTop) {
|
|
// There's no secondary nav OR secondary nav is below primary nav
|
|
if(previousTop - currentTop > SCROLL_DELTA) {
|
|
// If scrolling up...
|
|
mainHeader.removeClass('is-hidden');
|
|
}
|
|
else if(currentTop - previousTop > SCROLL_DELTA && currentTop > SCROLL_OFFSET) {
|
|
// If scrolling down...
|
|
mainHeader.addClass('is-hidden');
|
|
}
|
|
}
|
|
|
|
function checkStickyNavigation(currentTop) {
|
|
// Secondary nav below intro section - sticky secondary nav
|
|
var secondaryNavOffsetTop = belowNavHeroContent.offset().top - secondaryNavigation.height() - mainHeader.height();
|
|
|
|
if(previousTop >= currentTop) {
|
|
// If scrolling up...
|
|
if(currentTop < secondaryNavOffsetTop) {
|
|
// Secondary nav is not fixed
|
|
mainHeader.removeClass('is-hidden');
|
|
secondaryNavigation.removeClass('fixed slide-up');
|
|
belowNavHeroContent.removeClass('secondary-nav-fixed');
|
|
}
|
|
else if(previousTop - currentTop > SCROLL_DELTA) {
|
|
// Secondary nav is fixed
|
|
mainHeader.removeClass('is-hidden');
|
|
secondaryNavigation.removeClass('slide-up').addClass('fixed');
|
|
belowNavHeroContent.addClass('secondary-nav-fixed');
|
|
}
|
|
}
|
|
else {
|
|
// If scrolling down...
|
|
if(currentTop > secondaryNavOffsetTop + SCROLL_OFFSET) {
|
|
// Hide primary nav
|
|
mainHeader.addClass('is-hidden');
|
|
secondaryNavigation.addClass('fixed slide-up');
|
|
belowNavHeroContent.addClass('secondary-nav-fixed');
|
|
}
|
|
else if(currentTop > secondaryNavOffsetTop) {
|
|
// Once the secondary nav is fixed, do not hide primary nav if you haven't scrolled more than SCROLL_OFFSET
|
|
mainHeader.removeClass('is-hidden');
|
|
secondaryNavigation.addClass('fixed').removeClass('slide-up');
|
|
belowNavHeroContent.addClass('secondary-nav-fixed');
|
|
}
|
|
}
|
|
}
|
|
});
|