headroom.js使用

为页面顶部多留些空间。在不需要页头时将其隐藏

需要添加的css代码

.headroom {
transition: transform 200ms linear;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
}

加载headroom.js

初始化代码，然后就可以执行了。

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

转载于:https://www.cnblogs.com/baixuemin/p/5670663.html

headroom.js使用相关推荐

headroom.js插件使用方法
1.什么是headroom.js? headroom是用纯Javascript写的插件,用来隐藏和展示页面元素,从而为页面留下更多空间.比如使用headroom能使导航栏当页面下滚时消失,当页面上滚时 ...
headroom.js_使用Headroom.js创建自动隐藏粘性标题
自动隐藏标题在网页设计中稳定流行了一段时间. 许多博客和在线杂志都使用粘性标头来保持用户的参与度,并让他们直接访问导航 . Medium用基本概念重新定义了此功能 ,该概念在向下滚动时隐藏导航,而在 ...
Headroom.js的使用demo
Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...
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小工具(不依赖不论什么工具库.),它能在页面滚动时做出响应. 此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时 ...
前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
有哪些必看的前端 JS 库？
前端自动化前端构建工具 gulp – The streaming build system grunt – the JavaScript Task Runner 前端模块管理器 Bower – A ...

headroom.js使用

headroom.js使用相关推荐

最新文章

热门文章