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相关推荐

headroom.js插件使用方法
1.什么是headroom.js? headroom是用纯Javascript写的插件,用来隐藏和展示页面元素,从而为页面留下更多空间.比如使用headroom能使导航栏当页面下滚时消失,当页面上滚时 ...
js按键处理demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
headroom.js_使用Headroom.js创建自动隐藏粘性标题
自动隐藏标题在网页设计中稳定流行了一段时间. 许多博客和在线杂志都使用粘性标头来保持用户的参与度,并让他们直接访问导航 . Medium用基本概念重新定义了此功能 ,该概念在向下滚动时隐藏导航,而在 ...
Headroom.js 的使用
1.官网链接 headroom官网(中文版):http://www.bootcss.com/p/headroom.js/ headroom官网(国外版):http://wicky.nillia.ms/ ...
Headroom.js
下载 Development (3.7kB) Production (1.7kB) Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它 ...
Headroom.js – 快速响应用户的页面滚动操作
Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...
Headroom.js插件用法
一.Headroom.js是什么? Headroom.js是一个轻量级.高性能的JS小工具(不依赖不论什么工具库.),它能在页面滚动时做出响应. 此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时 ...
headroom.js使用
为页面顶部多留些空间.在不需要页头时将其隐藏需要添加的css代码 .headroom { transition: transform 200ms linear; } .headroom--pinne ...
vue.js中文社区Demo：vue全家桶，muse-ui
入坑Vue,参考 <基于vue-cli.Vue2.0 构建的单页面应用> 自己撸了一个vue.js中文社区的Demo. demo 地址 demo 项目代码代码技术栈 vue2x vue ...

Headroom.js的使用demo

工作原理

Headroom.js的使用demo相关推荐

最新文章

热门文章