导航滑动隐藏显现Headroom.js插件用法

导航特效Headroom.js插件用法，向下滑动导航向上滑出隐藏，向上滑动导航向下滑入显现。

html，导航代码

<header class="headroom">
	<div class="container">
		<div class="navbar-header">
		    <div class="logo"><a href="/"><img src="images/logo.png" alt=""></a></div>
		</div>
		<nav>
		    <ul class="nav">
		        <li><a href="">首页</a></li>
		        <li><a href="">产品项目</a></li>
		        <li><a href="">企业资讯</a></li>
		        <li><a href="">智慧社区</a></li>
		        <li><a href="">联系我们</a></li>
		    </ul>
		</nav>    
	</div>
</header>

css 样式代码

header {
	position: fixed;
	top: 0;
	transition: all .2s ease-in-out;
}
.headroom--unpinned {top: -100px;}
.headroom--pinned {top: 0;}

js代码，在html主题下方

<script src="https://cdn.bootcdn.net/ajax/libs/headroom/0.12.0/headroom.js"></script>//引入Headroom.js插件
<script>
    // 获取页面元素
    var myElement = document.querySelector("header");
    // 创建 Headroom 对象，将页面元素传递进去
    var headroom  = new Headroom(myElement);
    // 初始化
    headroom.init(); 
</script>