Right way to integrate jQuery effects for bootstrap navbar


#1

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;
            });
    }
});

#2

Have you tried putting a js file in a lib folder on the client, outside of the templates, or maybe master layout.js render function area?


#3

Cheers Franky - that’s exactly what I have done - and yes it works out of the box - amazing how the answers are always so much simpler than I manage to make the problem!