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?

13 thoughts on “Bootstrap 4 Smart Scroll”

  1. Had something similar in my practices. Took code from there and adapted to your case.

    if ($('.smart-scroll').length > 0) {

        var lastScrollTop = 0;
        $(window).scroll(function() {    

            var scroll_top = $(window).scrollTop();

            if (scroll_top > 1) { // think, this will work a little bit better to catch scrolltop more then 0(1)
                $(".smart-scroll").addClass("stick");
            } else { 
                $(".smart-scroll").removeClass("stick");
            }

            if (scroll_top > lastScrollTop){
                $(".smart-scroll").removeClass("scrolled-up");                      
            } else {
                $(".smart-scroll").addClass("scrolled-up");
            }                       
            lastScrollTop = st;

    });

}

    And CSS

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

  2. I added this below the if/else statement to prevent from hiding at the very top

    if(scroll_top <= 0) {
   $('.headerContainer').removeClass('scrolled-up').removeClass('scrolled-down');
}
    Reply

Leave a Comment