向下滚动时导航隐藏的 scrollTop 偏移答案

【问题标题】：scrollTop offset for nav hide on scroll down向下滚动时导航隐藏的 scrollTop 偏移
【发布时间】：2020-06-26 08:56:05
【问题描述】：

我正在使用一个脚本来在向下滚动时隐藏导航并在向上滚动时再次显示它。但是在 iOS 上，菜单会消失，因为当您点击页面顶部时会出现“反弹”。我在想触发页面顶部脚本的偏移量可以解决这个问题，还是有其他方法？

var prev = 0;
var $window = $(window);
var nav = $('#top-bar-container');

$window.on('scroll', function(){
  var scrollTop = $window.scrollTop();
  nav.toggleClass('hidden', scrollTop > prev);
  prev = scrollTop;
});

.hidden {
  transform: translateY(-100%);
  transition-duration: 0.6s !important;
  transition-timing-function: ease-in-out;
}

【问题讨论】：

标签： javascript jquery menu show-hide

【解决方案1】：

我已经用下面的代码修复了它，它自动添加了菜单栏高度作为偏移量。

var previousScroll = 0,
    headerOrgOffset = $('#top-bar-container').height();

// $('#top-bar-container').height(); <--- this is not needed I guess. 

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#top-bar-container').addClass('hidden');
        } else {
            $('#top-bar-container').removeClass('hidden');
        }
    } else {
            $('#top-bar-container').removeClass('hidden');
    }
    previousScroll = currentScroll;
});

【讨论】：

【解决方案2】：

如何检查scrollTop 是否也为0？可能是这样的：

var prev = 0;
var $window = $(window);
var nav = $('#nav');

$(window).scroll(function(){
    var scrollTop = $window.scrollTop();
    
    if(scrollTop < prev || scrollTop == 0){
        console.log("up");
        nav.show();
    }
    else{
        console.log("down");
        nav.hide();
    }
        
    prev = scrollTop
});

【讨论】：