<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: fixedtop: 0left: 0right: 0transition: all .2s ease-in-out}
.animated .slideDown {top: -100px}
.animated .slideUp {top: 0}
JavaScript自推出后就大受开发者的青睐，基于JavaScript的开发工具（这里包含大量的JS开发资源，包括前端、框架、通用类等）不计其数，开发者们可以灵活选择，轻松构建应用。本文分享十款JavaScript开发工具1. Kreate
这款工具有助于对 jQuery对象快速生成DOM。你可以创建单个或多个元素。
2. Night Watch js
Nightwatchjs拥有一个简洁而强大的语法，能够允许你快速编写测试。它是专用于浏览器应用和网站的一款端到端的测试解决方案。
3. Gulpjs
Gulp是比较火的开源项目，配置更简洁、更直观，受到很多开发者的青睐。
4. Easy Starjs
Easystarjs是利用 JavaScript API编写的，常用语构建HTML5游戏。开发者可以将其与现有的JS框架搭配使用。
5. Headroom.js
Headroom.js 是一款轻量级、高性能的JS组件（无依赖性）。
6. Harpjs
Harp是一款快速的、轻量级的Web服务器。Harp serves Jade，Markdown，EJS，CoffeeScript, Sass, LESS以及Stylus as HTML、CSS &JavaScrip均可轻松配置。
7. Gantt Twproject
Twoproject是一款在线免费的JS开发工具，基于jquery创建而来，拥有强大迷人的特性，包括CSS皮肤样式、资源编辑等。
8. Mocha
Mocha是一款功能丰富的JavaScript测试框架，可基于node.js及浏览器运行，它使异步测试变得更为简单有趣，支持灵活且准确的输出，捕捉异常现象。
9. Responsive Nav
Responsive Nav是一款轻量级的插件，帮助你为小屏幕创建连接导航。支持为移动设备创建触摸交互设计以及CSS转换等特性。
10. File API
headroom_百度翻译headroom[英]ˈhedru:m[美]ˈhɛdˌrum, -ˌrʊm
n.净空，头上空间，（拱梁等下面的）净空高度
[例句]Legislation to raise the debt ceiling now seems likely , giving the government headroom to operate until 2013.
通过提高债务上限的立法现在看起来是可能的，它将让美国政府获得在2013年前继续运转下去的空间。
有帮助请采纳，谢谢
答题不易，多谢配合
