Question

每当滚动条不在顶部位置时，我都会隐藏一个大的导航栏。

所以基本上，我有两个导航栏，相互重叠的想法。较高的一个位于顶部（具有较大的z指数），较小的一个具有相同的导航但宽度较小的位于其下方。

我想要的是当用户向下滚动鼠标滚轮/拖动滚动条时，使用键盘向下滚动一下，大导航栏将消失（更像是隐藏），将较小的导航栏留在顶部。

我做了一个技巧，高度较高的那个可滚动（不固定），下面的那个是固定的。

但我发现它很尴尬。因此，我希望在用户向下滚动时隐藏它，并在滚动条位于顶部时再次显示它。

基本上，它就像是自动隐藏模式下的Windows任务栏。但是当用户向下滚动并显示滚动条位于顶部时它会隐藏：））

Answer 1

您可以使用一些简单的JS来执行此操作：

window.onscroll = function() {
    var top = document.body.scrollTop + document.documentElement.scrollTop == 0;
    document.getElementById('topbar').style.display = top ? 'block' : 'none';
    document.getElementById('scollbar').style.display = top ? 'none' : 'block';
};

替换与您的代码相关的ID。

Answer 2

这是一个简单的jQuery函数，在这种情况下将显示或隐藏元素<ElementID>，取决于scrollTop位置。

$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() == 0) {
            $('#<ElementID>').show();
        } else {
            $('#<ElementID>').hide();
        }
    });
})

滚动条不在顶部时隐藏元素

2 个答案: