headroom.js README

The project's README from github.com/WickyNilliams/headroom.js. As one markdown file: README.md.

Headroom.js

Headroom.js is a lightweight, high-performance JS widget (with no dependencies) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.

Installation

Headroom.js is available on npm. To install:

npm install headroom.js --save

# or...
yarn add headroom.js

A a universal build (suitable for script tags, CommonJS, and AMD) is available from unpkg.com:

https://unpkg.com/headroom.js

Documentation

For complete documentation please visit the headroom.js website.

Quick start

After installing headroom.js. The following JS will create and initialise a headroom instance:

import Headroom from "headroom.js";

// select your header or whatever element you wish
const header = document.querySelector("header");

const headroom = new Headroom(header);
headroom.init();

Then you can add the following CSS to your page:

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

You should now see your header slide in and out in response to the user's scroll.

Contributions & Issues

Contributions are welcome. Please clearly explain the purpose of the PR and follow the current code style.

Issues can be resolved quickest if they are descriptive and include both a reduced test case and a set of steps to reproduce.

Contributing Guide

Setup

The following steps will get you setup to contribute changes to this repo:

  1. Fork the repo (click the Fork button at the top right of this page)
  2. Clone your fork locally
git clone https://github.com/<your_github_username>/headroom.js.git
cd headroom.js
  1. Install dependencies. This repo uses npm, so you should too.
npm install

Building

To build the project:

npm run build

To start a watcher for building the project and running tests:

npm start

Testing

To run the test suite in headless mode:

npm test

License

Licensed under the MIT License.

headroom.js (WickyNilliams/headroom.js)

Searching Database…

10.8K ·GitHub
Headroom.js
这是什么？Headroom.js 是一个轻量、高性能的 JavaScript 小组件，能够响应用户的滚动操作。它通常用于在向下滚动时隐藏页面头部，向上滚动时再将其显示出来。
它是框架还是小型库？它是一个独立的小型库，没有依赖项，不是框架。你在某个元素上创建一个 headroom 实例，滚动时它会切换 CSS 类。
我该如何把它添加到项目中？你可以通过 npm 安装，也可以从 unpkg.com 加载通用构建版本（支持以 script 标签、CommonJS 或 AMD 模块的方式使用），然后在 JS 中创建并初始化一个 headroom 实例。
使用它还需要其他库吗？不需要。它没有依赖项，你只需要一些配套的 CSS，用来定义页头滑入和滑出的状态。
设置时有哪些需要注意的地方？必须让 JS 的初始化代码与页头隐藏、显示状态对应的 CSS 规则配合使用。否则即使脚本在运行，页面上也不会有任何可见的变化。
在哪里可以阅读完整的 API 文档？README 中指向了 headroom.js 的专门网站，那里提供了快速入门之外的完整文档。
不使用构建工具也能用吗？可以。unpkg.com 上的通用构建版本可以直接放进 script 标签中使用，无需任何打包工具。
What are similar projects?interact.js, GSAP, aos, scrollreveal, slick, iscroll, Magnific-Popup, material
Which topics is it in?scroll, responsive, animation, css, browser, ui, gui, npm, frontend, tool, library, javascript
Creator
WickyNilliams
Size
0.7 MB
Stars
10.8K
Updated
CommitOct 16Releasev0.11.0Jan 17
Age
13y
Commits · 90 Days