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?

154 thoughts on “Bootstrap 4 Smart Scroll”

  43. Can I simply just say what a relief to find someone that truly knows what they are discussing over the internet.

    You certainly know how to bring a problem to light and make
    it important. A lot more people must read this and understand this side of your story.
    I can’t believe you are not more popular since you definitely possess
    the gift.

    Reply

  45. When I originally commented I seem to have clicked on the -Notify
    me when new comments are added- checkbox and now whenever a comment is added I recieve 4 emails with the exact same comment.
    Is there a way you can remove me from that service? Thank you!

    Reply

  51. It’s a pity you don’t have a donate button! I’d without a doubt donate to this fantastic blog!
    I suppose for now i’ll settle for book-marking and adding your RSS feed to my Google account.

    I look forward to fresh updates and will talk about this blog with my Facebook group.
    Talk soon!

    Reply

  53. You actually make it seem so easy with your presentation but
    I find this matter to be really something that I think I would
    never understand. It seems too complex and very broad for me.
    I’m looking forward for your next post, I will try to get the hang of
    it!

    Reply

  54. Hey there this is kind of of off topic but
    I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding skills so
    I wanted to get guidance from someone with experience.
    Any help would be enormously appreciated!

    Reply

  61. You really make it seem so easy with your presentation however I find this topic to be actually one thing which I believe I might by no means understand. It kind of feels too complex and extremely vast for me. I’m taking a look ahead for your next post, I will try to get the hold of it!

    Reply

  66. Have you ever considered about including a little bit more than just your articles?
    I mean, what you say is fundamental and all. But think about
    if you added some great photos or video clips to give your
    posts more, “pop”! Your content is excellent but with images and clips, this blog could undeniably be one of the greatest
    in its niche. Superb blog! scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

    Reply

  67. Hey would you mind stating which blog platform you’re using?
    I’m going to start my own blog soon but I’m having a difficult time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design seems
    different then most blogs and I’m looking for something unique.

    P.S Apologies for being off-topic but I had to ask!
    quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

    Reply

  81. Hey I am so delighted I found your blog page, I really found you by error, while I was
    browsing on Digg for something else, Nonetheless I am here now and
    would just like to say cheers for a incredible post and a all round enjoyable blog (I also love the theme/design), I don’t have time
    to read it all at the moment but I have saved it and also added
    your RSS feeds, so when I have time I will be back to read more, Please do keep
    up the fantastic b. http://herreramedical.org/viagra

    Reply

  101. Hello this is somewhat of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding expertise so I wanted to get guidance from someone with experience. Any help would be enormously appreciated!

    Reply

  102. With havin so much content do you ever run into any problems of plagorism or copyright violation? My site has a lot of completely unique content I’ve either authored myself or outsourced but it seems a lot of it is popping it up all over the web without my agreement. Do you know any techniques to help stop content from being stolen? I’d definitely appreciate it.

    Reply

Leave a Comment