I’m integrating a bootstrap theme from start bootstrap - here it is, which has a fetching reveal and hide on the navbar - reveal as you scroll up.
I’ve taken the code out of the js file that comes with the theme and tried to integrate it, but to no consistent effect - that is to say it sometimes works and sometimes it doesn’t.
When I wrap it up in the Template.header.rendered function it works perfectly until you navigate to another page - ok, so far - the header template hasn’t needed to re-render.
In a moment of whimsy I dropped it out of the rendered function into the body of the header.js and for a good long while it worked perfectly.
Now it does’t.
I’ve tried wrapping it up and calling it from every template as it is rendered, also no good.
I have to admit I have no idea what the right way to do this is - could someone please enlighten me!
here is the code that does the job -
jQuery(document).ready(function($) {
var MQL = 1170;
//primary navigation slide-in effect
if ($(window).width() > MQL) {
var headerHeight = $('.navbar-custom').height();
$(window).on('scroll', {
previousTop: 0
},
function() {
var currentTop = $(window).scrollTop();
//check if user is scrolling up
if (currentTop < this.previousTop) {
//if scrolling up...
if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) {
$('.navbar-custom').addClass('is-visible');
} else {
$('.navbar-custom').removeClass('is-visible is-fixed');
}
} else {
//if scrolling down...
$('.navbar-custom').removeClass('is-visible');
if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed');
}
this.previousTop = currentTop;
});
}
});