时间戳

首页 > 解决方案 > Bootstrap 4 Smart Scroll Mobile 菜单在顶部消失

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

问题描述

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

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

我的模板导航栏使用自定义 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，他们可以完美地工作。

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

标签： javascripthtmljquerycsstwitter-bootstrap

解决方案

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

推荐阅读