Question

用jquery来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码

Answer 1

<script type="text/javascript" src="https://npmcdn.com/headroom.js@0.9.3/dist/headroom.min.js"></script>
<script>
    (function() {
    new Headroom(document.querySelector("#nav-scroll"), { //这里的nav-scroll改为你的导航栏的id或class
        offset : 5, // 在元素没有固定之前，垂直方向的偏移量（以px为单位）
            tolerance: 5, // scroll tolerance in px before state changes        
        classes: {
            initial: "animated",  // 当元素初始化后所设置的class
            pinned: "slideUp", // 向上滚动时设置的class
            unpinned: "slideDown" // 向下滚动时所设置的class
        }
    }).init();    
    }());
</script>
然后，加上样式就可以了：

.animated {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.animated .slideDown {top: -100px;}
.animated .slideUp {top: 0;}