Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Cody House Nav Doesn't Function in IE Reply To: Cody House Nav Doesn't Function in IE

#265228
cives
Participant

Shikkediel – Thanks for working through this with me. I don’t doubt that you have a solution there, though I’m not sure I am up-to-speed enough with JS to know where to implement your solution.

Would you mind sharing where in the JS to insert that?

jQuery(document).ready(function($) {
//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don’t forget to update this value as well
var MQL = 300;
//primary navigation slide-in effect
if ($(window).width() > MQL) {
var headerHeight = $(‘.cd-header’).height();
$(window).on(‘scroll’, {
previousTop: 0
}, function() {
var currentTop = $(window).scrollTop();
//check if user is scrolling up

if (currentTop 0 && $(‘.cd-header’).hasClass(‘is-fixed’)) {
$(‘.cd-header’).addClass(‘is-visible’);
} else {
$(‘.cd-header’).removeClass(‘is-visible is-fixed’);
}
} else {
//if scrolling down…
$(‘.cd-header’).removeClass(‘is-visible’);
if (currentTop > headerHeight && !$(‘.cd-header’).hasClass(‘is-fixed’)) $(‘.cd-header’).addClass(‘is-fixed’);
}

this.previousTop = currentTop;

});
}
//open/close primary navigation
$(‘.cd-primary-nav-trigger’).on(‘click’, function() {
$(‘.cd-menu-icon’).toggleClass(‘is-clicked’);
$(‘.cd-header’).toggleClass(‘menu-is-open’);
//in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
if ($(‘.cd-primary-nav’).hasClass(‘is-visible’)) {
$(‘.cd-primary-nav’).removeClass(‘is-visible’).one(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, function() {
$(‘body’).removeClass(‘overflow-hidden’);
});
} else {
$(‘.cd-primary-nav’).addClass(‘is-visible’).one(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, function() {
$(‘body’).addClass(‘overflow-hidden’);
});
}
});
});