You must remove the
if (!currentScroll) {
header.removeClass('detached');
}
from the else section to ensure that the menu jump fix is active at all times, not just when the else condition is met.
For the updated codepen, please see: http://codepen.io/nashcheez/pen/KWKjjq
Therefore, your js code should look like this:
/* ==========================================================================
#SHOW/HIDE HEADER
========================================================================== */
$(function() {
var previousScroll = 0, // previous scroll position
menuOffset = 70, // height of menu (once scroll passed it, menu is hidden)
detachPoint = 220, // point of detach (after scroll passed it, menu is fixed)
hideShowOffset = 5, // scrolling value after which triggers hide/show menu
header = $('.page-head');
$(window).scroll(function() {
if (header.hasClass('expanded')) return;
var currentScroll = $(this).scrollTop(),
scrollDifference = Math.abs(currentScroll - previousScroll);
// if scrolled past menu
if (currentScroll > menuOffset) {
// if scrolled past detach point add class to fix menu
if (currentScroll > detachPoint) {
var value = parseInt(header.css('transform').split(',')[5]);
console.log(value);
if (!header.hasClass('transitioning') && !header.hasClass('detached') && value != -110) {
header.addClass('transitioning').one('transitionend', function() {
console.log('transitionend');
header.removeClass('transitioning');
if (currentScroll > detachPoint) header.addClass('detached');
});
} else if (!header.hasClass('transitioning') && !header.hasClass('detached')) {
header.addClass('detached');
}
}
// if scrolling faster than hideShowOffset hide/show menu
if (scrollDifference >= hideShowOffset) {
if (currentScroll > previousScroll) {
// scrolling down; hide menu
if (!header.hasClass('invisible'))
header.addClass('invisible');
} else {
// scrolling up; show menu
if (header.hasClass('invisible'))
header.removeClass('invisible');
}
}
}
// only remove “detached” class if user is at the top of document (menu jump fix)
if (!currentScroll) {
header.removeClass('detached');
}
// If user is at the bottom of document show menu.
if ($(window).height() + currentScroll == $(document).height()) {
header.removeClass('invisible');
}
// Replace previous scroll position with new one.
previousScroll = currentScroll;
});
});
/* ==========================================================================
#SHOW/HIDE NAVIGATION
========================================================================== */
/*
* Creates classes to enable responsive navigation.
*/
// Wait for the DOM to be ready (all elements printed on page regardless if
// loaded or not).
$(function() {
// Bind a click event to anything with the class "toggle-nav".
$('.page-head__toggle').click(function() {
if ($('body').hasClass('show-nav')) {
$('body').removeClass('show-nav').addClass('hide-nav');
setTimeout(function() {
$('body').removeClass('hide-nav');
}, 500);
} else {
$('body').removeClass('hide-nav').addClass('show-nav');
}
// Deactivate the default behavior of going to the next page on click.
return false;
});
});