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

Hide element when scroll bar is not at the top

本文关键字：隐藏 元素 顶部 滚动条      更新时间：2023-09-26

我有一个大的导航条，我想隐藏每次滚动条不在顶部位置

基本上，我有两个导航栏的想法，它们相互重叠。一个高度较大的在上面(有较大的z-index)，一个宽度较小的具有相同导航但宽度较小的在下面。

我想要一些东西，当用户滚动他的鼠标滚轮向下/拖动滚动条，使用键盘向下滚动一点，大的导航条会消失(更像隐藏)，留下小的一个在上面。

我做了一个技巧，高的那个是可滚动的(不固定)，下面的是固定的。

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

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

你可以使用一些简单的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

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

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