用jquery来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码
发布网友
发布时间：2022-04-24 10:34
共1个回答
热心网友
时间：2022-04-24 12:03
<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;}
