Home › Forums › CSS › Cody House Nav Doesn't Function in IE › Reply To: Cody House Nav Doesn't Function in IE
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’);
});
}
});
});