Headroom.js 是什么?

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

Headroom.js 有什么用?

固定页头(导航条)可以方便用户在各个页面之间切换。但是这也会带来些问题…本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com)

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

Headroom.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"
}
}

下载地址:

https://raw.githubusercontent.com/WickyNilliams/headroom.js/master/dist/headroom.js

本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com)

页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果的更多相关文章

  1. iOS:自定义导航栏,随着tableView滚动显示和隐藏

    自定义导航栏,随着tableView滚动显示和隐藏 一.介绍 自定义导航栏是APP中很常用的一个功能,通过自定义可以灵活的实现动画隐藏和显示效果.虽然处理系统的导航栏也可以实现,但是这个是有弊端的,因 ...

  2. 如何使用Bootstrap4显示和隐藏元素

    如何使用Bootstrap4显示和隐藏元素 为了更快地进行移动设备开发,请使用响应式显示类来按设备显示和隐藏元素.避免创建相同站点的完全不同版本,而是相应地为每个屏幕大小隐藏元素. 要隐藏元素,只需使 ...

  3. html显示与隐藏元素的几种方式

    html显示与隐藏元素的几种方式 1.display none : 无 隐藏元素 block : 显示 转换为块级元素   不占位:当隐藏的时候元素就完全没有了.不能看见和操作该元素. 优点:为其他元 ...

  4. Headroom.js插件用法

    一.Headroom.js是什么? Headroom.js是一个轻量级.高性能的JS小工具(不依赖不论什么工具库.),它能在页面滚动时做出响应. 此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时 ...

  5. spin.js插件的转圈加载效果

    先上插件链接地址:http://fgnass.github.io/spin.js/ 以下是使用spin.js插件的完整版测试例子: <!doctype html> <html> ...

  6. js滚动到指定位置显示或隐藏元素

    $(function(){ $(window).scroll(function(){ var scroll_top=$(window).scrollTop(); console.log(scroll_ ...

  7. react-native 标题随页面滚动显示和隐藏

    效果图如下: 代码实现: import React, {Component} from 'react'; import { ScrollView, Text, View, FlatList, } fr ...

  8. Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明)

    一.隐藏和显示元素 $('#button_save_12').css('display', 'none'); // 隐藏按钮 $('#button_save_12').css('display', ' ...

  9. vue中v-show和v-if在显示和隐藏元素上的区别

    v-show将元素隐藏是在dom节点上加style='display:none' v-if是直接将元素完全去掉 拿v-show示例,(v-if 也是一样,把下面的代码中v-show替换成v-if即可运 ...

随机推荐

  1. SSRF绕过filter_var(),preg_match()和parse_url()

    1.利用curl的变量解释符$ php版本 利用代码 /*ssrf.php*/<?php echo ]."n"; // check if argument is a vali ...

  2. solr7.7.0搜索引擎使用(三)(添加文件索引)

    众所周知,solr与es的最大区别是,solr可以对pdf,txt,doc等文件生成索引 那我们如何添加文件索引呢? 步骤1.添加core,取名暂且为 coreFile 在bin下执行命令 ./sol ...

  3. Visual Studio2013 配置opencv3.3.0 x64系统

    注:小白一个,第一次写博客,可能会有一些理解上的错误,只此记录自己测试成功的坎坷之路,已备以后查看,同时给有需要之人. 我是win10 64 位,之前安装了visual studio 2013, 现在 ...

  4. kbmmw 5.07 正式发布

    来了来了 5.07.00 Dec 9 2018           Important notes (changes that may break existing code)         === ...

  5. redis 集群模式安装

    概念 Redis集群提供一种方式自动将数据分布在多个Redis节点上. 每个Redis集群中的节点都需要打开两个TCP连接.一个连接用于正常的给Client提供服务,比如6379,还有一个额外的端口( ...

  6. PHP查看内存使用

    第一想法:memory_get_usage() 用microtime函数就可以分析程序执行时间memory_get_usage可以分析内存占用空间 SQL的效率可以使用打开慢查询查看日志分析SQL 找 ...

  7. vi显示中文乱码

    问题:vi/vim 编辑ANSI文本时,中文会显示乱码! 解决方法:修改vi/vim配置文件,添加如下红色并加粗的部分! vi    配置文件路径:/etc/vircvim 配置文件路径:/etc/v ...

  8. nginx 502错误 upstream sent too big header while reading response header from upstream

    原本的设置是 proxy_buffer_size 4k; proxy_buffers 4 32k; proxy_busy_buffers_size 64k; 在这种配置下,使用fiddler进行抓包分 ...

  9. linux安装nodejs运行vue程序

    linux安装nodejs运行vue程序 1.与node官网下载安装包 https://nodejs.org/zh-cn/download/ 6.上传到服务器,并解压 tar -xvf node-v1 ...

  10. JavaScript学习之路-为什么要学习JavaScript语法

    版权声明:未经博主允许不得转载 前言 为什么要学习JavaScript语法,没有理由,因为工作需要,也为了成为全栈,那现在还是好好努力学习吧! 发展 说实话,JavaScript很好学也很重要,也很容 ...