Bootstrap 4 Smart Scroll Mobile菜单在顶部消失

问题描述

我正在尝试在引导程序上使用此Smart Scroll https://bootstrap-menu.com/detail-smart-hide.html，该功能在桌面设备上可以正常使用，但在移动设备上，向下滚动然后返回顶部时，导航栏会出现故障。回到顶部后，导航栏将再次隐藏。我已经尝试过Bootstrap 4 Smart Scroll的建议，但是没有用。

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

我的模板导航栏正在使用自定义JS将导航栏固定在顶部，而不是固定在顶部。

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

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

要测试原始代码，此故障在代码本身中，有人可以帮助解决此问题并在iPhone Safari中对其进行测试吗？

我发现以下JS有人发布了一些JS，如果有人可以帮助我将其应用到我的代码中，他们将使其正常工作。

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

解决方法

来自 bootstrap 4 smartscroll 的答案是正确的。只是 renderer.debug.checkShaderErrors = true 最后一行的类型错误 .js 应该是 -> lastScrollTop = st;

html javascript jquery twitter-bootstrap