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), после чего создайте и инициализируйте экземпляр headroom в своём JS-коде.
Нужны ли для её использования другие библиотеки?Нет, зависимостей нет; нужны только сопутствующие 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