导航滑动隐藏显现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>