Headroom.js的使用demo

Headroom.js 是什么？

Headroom.js
是一个轻量级、高性能的JS小工具（不依赖任何工具库！），它能在页面滚动时做出响应。此页面顶部的导航条就是一个鲜活的案例，当页面向下滚动时，导航条消失，当页面向上滚动时，导航条就出现了。

Headroom.js 有什么用？

固定页头（导航条）可以方便用户在各个页面之间切换。但是这也会带来些问题…

大屏幕一般都是宽度大于高度的，也就是说屏幕高度要少一些。固定页头会占用一部分本来可以用于展示内容的区域。小屏幕一般是高度较大，但是别忘了，屏幕本来就小，页头再占用一部分的话，屏幕可用于展示内容的区域当然还是少。

Headroom.js 能帮你把不需要的页面元素在合适的时间展示出来，让用户花更多时间关注你页面上的内容。

工作原理

简单来说，headroom.js 只是为需要响应滚动事件的页面元素增加或删除一个CSS class

<!-- 初始状态 -->
<header class="headroom">

<!-- 向下滚动时 -->
<header class="headroom headroom--unpinned">

<!-- 向上滚动时 -->
<header class="headroom headroom--pinned">

通过CSS
class的设置，事情变得简单了。所有的控制权就交回到了你的手中，当页面向上或向下滚动时，你就可以通过设置CSS样式来做出自己需要的变化了。

代码demo
你要自己下载Headroom.js并引入

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>Headroom.js</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="headroom.css" type="text/css">
    <!--<link href="//cdn.bootcss.com/normalize/2.1.0/normalize.css" rel="stylesheet">-->
    <!--<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>-->
    <script src="headroom.js" type="text/javascript"></script>
    <!--<script src="//cdn.bootcss.com/headroom/0.7.0/jQuery.headroom.js"></script>-->
</head>
<body>
        <header id="header" class="header header--fixed">
            Headroom.js
        </header>
        <!--测试增加页面/start-->
        <div style="height:1000px;background: #FF0000;color:#FFFFFF;padding-top:46px;text-align: center;font-size: 60px;">红
        </div>
        <div style="height:1000px;background: #00FF00;color:#FFFFFF;text-align: center;font-size: 60px;">绿</div>
        <div style="height:1000px;background: #0000FF;color:#FFFFFF;text-align: center;font-size: 60px;">蓝</div>
        <!--测试增加页面/end-->
        <script>
            var header = document.querySelector("header");
            var headroom = new Headroom(header, {
                tolerance: 5,
                offset: 205,
                classes: {
                    initial: "animated",
                    pinned: "slideDown",
                    unpinned: "slideUp"
                }
            });
            headroom.init();

            //jquery的使用方式
            // $(function() {
            //     $("#header").headroom({
            //         tolerance: 5,
            //         offset: 205,
            //         classes: {
            //             initial: "animated",
            //             pinned: "slideDown",
            //             unpinned: "slideUp"
            //         }
            //     });
            // })
        </script>
</body>
</html>

css样式：

*{
    margin: 0;
    padding: 0;
}
.header {
    background-color: #292f36;
    height:46px;
    line-height: 46px;
    color: #FFFFFF;
    padding: 0 1.5em;
    text-align: center;
}

.header--fixed {
    position: fixed;
    z-index: 10;
    right: 0;
    left: 0;
    top: 0
}

.animated {
    -webkit-animation-duration: .5s;   /*表示动画执行的时间*/
    -webkit-animation-fill-mode: both; /*规定动画在播放前和之后其动画效果是否可见*/
    animation-fill-mode: both
}

@-webkit-keyframes slideDown {       /*表示匀速地执行动画*/
    0% {
        -webkit-transform: translateY(-46px);
    }

    100% {
        -webkit-transform: translateY(0);
    }
}

.animated.slideDown {
    -webkit-animation-name: slideDown;   /*规定需要绑定到选择器的 keyframe 名称。。*/
    animation-name: slideDown
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-46px);
    }
}

.animated.slideUp {
    -webkit-animation-name: slideUp;
    animation-name: slideUp
}

Headroom.js的使用demo

工作原理

猜你喜欢