页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果
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插件帮助你实现滚动效果的更多相关文章
- iOS:自定义导航栏,随着tableView滚动显示和隐藏
自定义导航栏,随着tableView滚动显示和隐藏 一.介绍 自定义导航栏是APP中很常用的一个功能,通过自定义可以灵活的实现动画隐藏和显示效果.虽然处理系统的导航栏也可以实现,但是这个是有弊端的,因 ...
- 如何使用Bootstrap4显示和隐藏元素
如何使用Bootstrap4显示和隐藏元素 为了更快地进行移动设备开发,请使用响应式显示类来按设备显示和隐藏元素.避免创建相同站点的完全不同版本,而是相应地为每个屏幕大小隐藏元素. 要隐藏元素,只需使 ...
- html显示与隐藏元素的几种方式
html显示与隐藏元素的几种方式 1.display none : 无 隐藏元素 block : 显示 转换为块级元素 不占位:当隐藏的时候元素就完全没有了.不能看见和操作该元素. 优点:为其他元 ...
- Headroom.js插件用法
一.Headroom.js是什么? Headroom.js是一个轻量级.高性能的JS小工具(不依赖不论什么工具库.),它能在页面滚动时做出响应. 此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时 ...
- spin.js插件的转圈加载效果
先上插件链接地址:http://fgnass.github.io/spin.js/ 以下是使用spin.js插件的完整版测试例子: <!doctype html> <html> ...
- js滚动到指定位置显示或隐藏元素
$(function(){ $(window).scroll(function(){ var scroll_top=$(window).scrollTop(); console.log(scroll_ ...
- react-native 标题随页面滚动显示和隐藏
效果图如下: 代码实现: import React, {Component} from 'react'; import { ScrollView, Text, View, FlatList, } fr ...
- Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明)
一.隐藏和显示元素 $('#button_save_12').css('display', 'none'); // 隐藏按钮 $('#button_save_12').css('display', ' ...
- vue中v-show和v-if在显示和隐藏元素上的区别
v-show将元素隐藏是在dom节点上加style='display:none' v-if是直接将元素完全去掉 拿v-show示例,(v-if 也是一样,把下面的代码中v-show替换成v-if即可运 ...
随机推荐
- Shell 脚本获取当前目录 和 获得 文件夹名
#!/bin/bash project_path=$(cd ``; pwd) project_name="${project_path##*/}" echo $project_pa ...
- 用windows性能监视器检测sqlserver 常见指标
转载地址:https://www.cnblogs.com/xdong/p/4296072.html
- Integer 与int的区别
1.在的model的时候很多喜欢用int 类型 但是最好用Integer类型因为在查询的时候如果返回不到数据 Model就会报这个类是空的 所以应该尽量选用interger
- AngularJS封装webupload实现文件夹上传
百度的webupload没有开放api获取整个文件夹的信息.本文是二次开发webupload实现获取文件夹信息. 指令封装 /** * @license lx.ui.framework v1.0.0 ...
- Python之旅Day1 数据类型初识(数字|字符串|列表|数据运算) 编码 表达式(if...else|for|while)
初识PYTHON Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum(吉多·范罗苏姆)于 ...
- 隐藏字符 BOM
如果您在修改任何PHP文件後发生: * 不能登入或者不能登出: * 页顶出现一条空白: * 页顶出现错误警告: * 其它不正常的情况. 则多半是编辑器的问题. 本程序采用UTF-8编码.现在几乎所 ...
- 小程序基础知识点讲解-WXML + WXSS + JS,生命周期
小程序基础 小程序官方地址,小程序开发者工具,点击此处下载.在微信小程序中有一个配置文件project.config.json,此文件可以让开发者在不同设备中进行开发. 微信小程序共支持5种文件,wx ...
- git简易使用
git的安装以及GitHub的注册这里就不说了,这里直接从上传开始. 1. 登录github进入settings 2. 添加SSH KEY,添加方式查看第3步 3. 由于本地Git仓库和Github仓 ...
- Linux - 查看和更改系统字符集
查看当前系统字符集 $ echo $LANG en_US.UTF-8 $ $ env |grep LANG LANG=en_US.UTF-8 $ $ locale |grep CTYPE LC_CTY ...
- 简介 - RESTful
RESTful REST(Representational State Transfer,表现层状态转化),可以简单理解为"资源在网络中以某种表现形式进行状态转移" Resourc ...