headroom.js

现在很多的网站使用了前端框架,如BootStrap。
在使用BootStrap制作网页的时候,我们经常会用到BootStrap所提供的导航条组件。
并且很多的网站会把这个导航条固定在网页的顶上,虽然好看,但是有的时候我们要在页面上呈现很多东西的时候,我们就会觉得固定在顶部的导航条是多余的。
这个时候,我们就可以使用headroom.js,headroom.js可以使我们的网页在滚动到下方的时候,顶部的导航条会自动收起来。给我们的页面更多的空间。

1.首先在<head>标签中加入

<style>
        .headroom {
            transition: transform 200ms linear;
        }
        .headroom--pinned {
            transform: translateY(0%);
        }
        .headroom--unpinned {
            transform: translateY(-100%);
        }
</style>

2.在<body>标签的最后引入headroom.js

<script src="http://cdn.bootcss.com/headroom/0.5.0/headroom.min.js"></script>

3.在引入了headroom.js之后再加入headroom.js代码

<script>
        // grab an element
        var myElement = document.querySelector("header");
        // construct an instance of Headroom, passing the element
        var headroom  = new Headroom(myElement);
        // initialise
        headroom.init();
</script>

github中的源代码
headroom.js官网
headroom.js中文官网

推荐阅读更多精彩内容