1

I'm trying to use this Smart Scroll https://bootstrap-menu.com/detail-smart-hide.html on bootstrap it's working perfectly for desktop but on mobile, the navbar is glitchy when scrolling down, then going back to the top. Once back to the top, the navbar hides again. I've tried the suggestion from Bootstrap 4 Smart Scroll but it didn't work.

js

if ($('.smart-scroll').length > 0) { // check if element exists
    var last_scroll_top = 0;
     $(window).scroll(function() {
        var scroll_top = $(window).scrollTop();
        if(scroll_top > 1) { $(".smart-scroll").addClass("scrolled-up");} else {$(".smart-scroll").removeClass("scrolled-up");}
        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;
    });
}

css

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

My template navbar is using custom JS to make nav bar fixed to the top instead of using fixed-top.

function loadWindowEvents() {
    $(window)
    .on("scroll", function() {
        loadSkills();
    });

    $(window)
    .on('scroll', function() {
        if ($(window)
            .scrollTop() >= 100) {
            $('.menu-wrap')
        .addClass('fixed');
    } else {
        $('.menu-wrap')
        .removeClass('fixed');
    }
});
}

Testing the original code this glitch is in the code itself, can anyone help resolve this and test it on a iPhone safari?

I've found the following JS someone posted where they have it working perfectly if someone can help me apply to my code.

window.location.hash.startsWith("#nav") && (window.location.hash = "", a());
let c = 0;
window.addEventListener("scroll", () => {
    const t = Math.abs(parseInt(document.documentElement.getBoundingClientRect().top));
    if (t <= n + 1 || t <= i.getBoundingClientRect().top + 1) return e.classList.remove("is-scrolled"), e.classList.remove("is-pinned"), void e.classList.remove("is-transition-enabled");
    t > n + 2 * e.offsetHeight && (e.classList.add("is-scrolled"), e.classList.contains("is-transition-enabled") || g(600).then(() => e.classList.add("is-transition-enabled"))), Math.abs(t - c) < 5 || (t < c ? e.classList.add("is-pinned") : e.classList.remove("is-pinned"), c = t)
}), t.addEventListener("click", async t => {
    t.preventDefault(), e.classList.contains("is-open") ? h() : a()
});
evilgenie
  • 21
  • 6

1 Answers1

0

The answer from bootstrap 4 smartscroll was correct. just a type error in the last line of the .js lastScrollTop = st; should be -> lastScrollTop = scroll_top;

behzad
  • 801
  • 3
  • 15
  • 33
user15161017
  • 1