Question

我有这段代码可以使顶部栏菜单在您向下滚动时消失，然后在向上滚动时显示，无论您在页面上的什么位置都显示一点。在所有浏览器和Android上，它都像魅力一样起作用，但是在Iphone上，由于滚动弹跳，我遇到了麻烦。如果我在页面顶部并向上滚动（像更新页面或类似操作时一样拖动页面顶部），则顶部栏菜单消失。这是因为该网站认为它可以滚动，但实际上没有，

    menuOnScroll: function () {

        // Hide Header on on scroll down
        var didScroll;
        var lastScrollTop = 0;

        $(window).scroll(function(event){
            didScroll = true;
        });

        setInterval(function() {
            if (didScroll) {
                hasScrolled();
                didScroll = false;
            }
        }, 250);

        function hasScrolled() {
            if ((window).matchMedia("(min-width: 767.98px)").matches) {
                var delta = 5;
            } else {
                var delta = 100;
            }
            var st = $(this).scrollTop();
            var subMenus = $('.extended-navigation.show').attr('id');
            // Make sure they scroll more than delta
            if(Math.abs(lastScrollTop - st) <= delta)
                return;

            if (st > lastScrollTop){
                // Scroll Down
                $('#topbar').removeClass('nav-up').addClass('scroll-top-bar');
                $('.main-menu-container, #search-extended').addClass('sticky nav-hide').removeClass('nav-show');
                if ((window).matchMedia("(min-width: 767.98px)").matches) {
                    $('.main-navigation').addClass('d-xs-none');
                    $('.main-menu a[href="#'+subMenus+'"]').click();
                }
            } else {
                // Scroll Up
                if(st + $(window).height() < $(document).height()) {
                    $('#topbar').removeClass('scroll-top-bar').addClass('nav-up');
                    $('.main-menu-container, #search-extended').removeClass('nav-hide').addClass('nav-show');
                    if ((window).matchMedia("(min-width: 767.98px)").matches) {
                        $('.main-navigation').addClass('d-xs-none');
                        $('.main-menu a[href="#'+subMenus+'"]').click();
                    }
                }
            }

            if($(window).scrollTop() < delta && (window).matchMedia("(min-width: 767.98px)").matches){
                $('.main-menu-container').removeClass('sticky');
            }if($(window).scrollTop() > delta && (window).matchMedia("(min-width: 767.98px)").matches) {
                $('.main-menu a[href="#'+subMenus+'"]').click();  
            }

            lastScrollTop = st;
        }
    }

我尝试了一些解决方案，包括将delta值更改为100或更大。如果我将其更改为200，它可以工作，但同时也会带来其他问题，例如，向下滚动时，t栏菜单直到很晚才消失。我还尝试了以下一些解决方案：iOS: disable bounce scroll but allow normal scrolling和document.ontouchmove and scrolling on iOS 5

与上述JS代码相关的一些CSS：

    .sticky {
        z-index: 9998;
        position: fixed;
        top: 0;
        width: 100%;
        transition: top 0.3s;
        margin-top:0px;
        &.nav-hide {
            top: 0px;
            transition: top 0.3s;
        }
        &.nav-show {
            top: 70px;
            transition: top 0.3s;
        }
    }

    #topbar {
        height: 70px;
        width: 100%;
        background-color: $dark-blue;
        position: fixed;
        top: 0;
        transition: top 0.3s;
        z-index: 9999;
        align-items: center;
        &.scroll-top-bar {
            top: -70px;
        }    
    }

一些HTML（极其压缩...）

    <body>
        <header id="header">
            <div class="top-bar d-flex justify-content-center p-0" id="topbar">
              ---- CONTENT in top-bar -----
            </div>

            <div class="accordion main-navigation d-xs-none d-md-block" id="accordion">
             <div class="main-menu-container">
               ---- CONTENT of main-menu ----
             </div>
            </div>
        </header>
        <article role="main">
         ---- CONTENT of main page ----
        </article>
     </body>

我不想使用插件，我想使用jQuery或javascript。我的原始滚动功能中有什么可以解决的吗？还是我可以做一个新功能来防止滚动弹跳？

滚动弹跳使ios上的滚动功能混乱

0 个答案: