向下滚动时隐藏菜单在向上滚动时显示 - Safari 的问题答案

【问题标题】：Hide Menu on scroll down show on scroll up - issue with Safari向下滚动时隐藏菜单在向上滚动时显示 - Safari 的问题
【发布时间】：2020-06-24 19:19:46
【问题描述】：

我对 JS 有疑问 - “向下滚动时隐藏菜单，向上滚动时显示”及其在 Safari 上的优化。

该菜单适用于除 Safari 之外的所有浏览器，因为顶部弹跳它会在顶部消失。

这里是JS代码：

var lastPosition = 0;
$(document).ready(function(){
  $(window).on('scroll', function(){

    $('header').toggleClass('hide', $(window).scrollTop() > lastPosition);
    lastPosition = $(window).scrollTop();

});

我不想要固定菜单我很乐意听到任何建议。

非常感谢，

芭芭拉

【问题讨论】：

标签： javascript safari

【解决方案1】：

我认为这个问题是由过早的效果引起的，这意味着它会过早地隐藏菜单。例如查看以下代码：

var hasScrolled;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

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

// Check condition every 250ms
setInterval(function() {
    if (hasScrolled) {
        hasScrolled();
        hasScrolled = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta, which may fix Safari scenario
    if (Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}

这里的神奇之处在于，它会在尝试隐藏菜单之前检查您是否滚动到 delta 值以下。

图片来源：Gill @codeeek.com (Source)

【讨论】：

@Barbora 太棒了！：）别客气。请尽可能将答案标记为解决方案。