Bootstrap 4 Smart Scroll

by

I’m using this basic tutorial to show/hide a standard BS4 navbar on scroll, and it works great for desktop.

However, on mobile the navbar is acting a little strange when scrolling down, then going back to the top. Once back to the top, the navbar hides again.

I suspect the issue has something to do with scrollTop() but can’t seem to troubleshoot this one.

Here’s my JS:

    if ($('.smart-scroll').length > 0) { // check if element exists
        var last_scroll_top = 0;
        $(window).on('scroll', function() {
            var scroll_top = $(this).scrollTop();
            if(scroll_top < last_scroll_top) {
                $('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
            } else {
                $('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
            }
            last_scroll_top = scroll_top;
            /* Tried to catch for scroll_top zero, but doesn't help */
            if(scroll_top == 0) $('.smart-scroll').removeClass('scrolled-up');

        });
    }

And, here’s my CSS:

.smart-scroll {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}
.scrolled-down {transform:translateY(-100%);}
.scrolled-up {transform:translateY(0);}

I also tried incorporating this stackoverflow and still couldn’t get it working.

Any ideas to get this operational on mobile?

24 thoughts on “Bootstrap 4 Smart Scroll”

Leave a Comment