设置网页元素随滚动而隐藏或显示

上图效果经常用在网站导航菜单里，当用户向下滑动网页时自动隐藏菜单栏，向上滑动则显示。这样即可以充分利用屏幕高度，也能让用户方便地访问菜单。

实现方法很简单，代码如下（附 DEMO）。

HTML 结构

<header class="fixed-top">
    <nav>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
    </nav>
</header>

.fixed-top 是绑定事件的 CSS 类，使用过程中替换成自己的。

CSS 样式

.fixed-top {
    position:fixed;
    top:0;
    right:0;
    left:0;
    z-index:1030
}
.fixed-top {
    will-change:transform;
    transition:transform 300ms linear
}
.is-hidden {
    transform:translateY(-100%)
}
.is-show {
    transform:translateY(0%)
}

为相关类选择器添加样式，以显示触发事件的视觉效果。

jQuery 代码

$(function() {
    var vertical_scroll = $(document).scrollTop();
    $(window).scroll(function() {
    var rolling_action = $(document).scrollTop();
        if (rolling_action > 200) {
            $('.fixed-top').addClass('is-hidden')
        }
        if (rolling_action > vertical_scroll) {
            $('.fixed-top').removeClass('is-show')
        } else {
            $('.fixed-top').removeClass('is-hidden').addClass('is-show')
        }
        if (rolling_action < 200) {
            $('.fixed-top').removeClass('is-show')
        }
    vertical_scroll = $(document).scrollTop();
    })
});

上面代码默认滑动 200px 后开始触发事件。在添加代码前需先引入 jQuery.js 文件。

其它补充

上面原始代码来自这篇外文，在原基础上做了一些精简修改。原代码根据所设置的元素高度开始触发事件，这里改成了按指定高度。另外随滚动状态删除多余的 CSS 类。

这个代码相对简单，只实现了基本功能。如果网页内使用了其它特效，可能要按需修改下。例如有的元素设置了随页面滚动而固定显示，由于菜单栏不是固定显示的，为避免菜单栏滑出时遮挡住其它元素，需要调整受影响元素的边距。案例可以查看文中 DEMO 的侧边栏固定元素，代码查看网页源码。

最后分享几个类似功能的 jQuery 代码项目。

https://github.com/WickyNilliams/headroom.js
https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar
https://github.com/filippo-quacquarelli/scroll-hide
https://codyhouse.co/gem/auto-hiding-navigation