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

【问题标题】：Hide element when scroll bar is not at the top当滚动条不在顶部时隐藏元素
【发布时间】：2014-05-06 23:49:51
【问题描述】：

我有一个很大的导航栏，每次滚动条不在顶部位置时我都想隐藏它。

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

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

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

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

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

【问题讨论】：

标签： javascript

【解决方案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。

【讨论】：

【解决方案2】：

这是一个简单的 jQuery 函数，它会根据 scrollTop 位置显示或隐藏元素 <ElementID>。

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

【讨论】：

我试过这个脚本，哇，它成功了！现在，我有另一个后续问题，我将如何为它设置动画，就像它隐藏起来一样？就像在wondows中自动隐藏任务栏的工作方式一样？我知道它类似于 animate() 但我不确定我应该把它放在哪里:))
抱歉。我现在想通了。我在 hide() 中插入了一个数字，所以它现在看起来像 hide("3")。谢谢！
不...你为什么要这样做？滚动时，方式在浏览器上做了太多工作......