小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米介绍

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
您的位置:首页 > 前端开发 > 响应式网站

Headroom.js解决响应式网站手机端导航占屏过高问题

分类: 响应式网站124个赞

我们知道,固定页头(导航条)可以方便用户在各个页面之间切换。但是这也会带来些问题…大屏幕一般都是宽度大于高度的,也就是说屏幕高度要少一些。固定页头会占用一部分本来可以用于展示内容的区域。小屏幕一般是高度较大,但是别忘了,屏幕本来就小,页头再占用一部分的话,屏幕可用于展示内容的区域当然还是少。所以如何处理导航成为前端开发人员比较棘手的问题,


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



Headroom.js 是什么?


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


工作原理


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

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

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

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

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


用法


使用 headroom.js 是很简单的。它提供了简单的 JS API,另外,还可以作为 jQuery/Zepto 插件使用。

纯JS调用方式

// 获取页面元素
var myElement = document.querySelector("header");
// 创建 Headroom 对象,将页面元素传递进去
var headroom  = new Headroom(myElement);
// 初始化
headroom.init();

以 jQuery/Zepto 插件形式调用

// 是不是很简单!
// 注意: init() 默认在插件内部被调用了
$("#header").headroom();

插件还提供了一个 data-* API :

<!-- selects $("[data-headroom]") -->
<header data-headroom>

注意:为了兼容,Zepto 的data module 也需要引入。


参数


Headroom.js 还能接受一个参数对象,用以改变其行为。你可以看一下 Headroom.js 源码中对 Headroom.options 的定义。其 options 对象的结构如下:

{
    // 在元素没有固定之前,垂直方向的偏移量(以px为单位)    offset : 0,
    // scroll tolerance in px before state changes    tolerance : 0,
    // 对于每个状态都可以自定义css classes 
    classes : {
        // 当元素初始化后所设置的class        initial : "headroom",
        // 向上滚动时设置的class        pinned : "headroom--pinned",
        // 向下滚动时所设置的class        unpinned : "headroom--unpinned"
    }}


查看更多案例及用法请点击:点击查看案例 本文大部分摘自:http://www.bootcss.com/p/headroom.js/

小米技术社区

本站内容均为小米原创,转载请注明出处:小米技术社区>> Headroom.js解决响应式网站手机端导航占屏过高问题