awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
WickyNilliams avatar

WickyNilliams/headroom.js

0
View on GitHub↗
10,833 stars·796 forks·JavaScript·MIT·12 viewswicky.nillia.ms/headroom.js↗

Headroom.js

headroom.js is a client-side JavaScript header visibility controller and DOM manipulator. It functions as a scroll-based UI component that hides page headers during downward scrolls and reveals them during upward scrolls to maximize available viewport space.

The tool manages dynamic header visibility by monitoring real-time browser scroll events. It optimizes the vertical viewing area of responsive web layouts by toggling the visibility of navigation bars based on the user's scroll direction.

The system operates through scroll-position tracking and delta-based state switching to determine movement direction. It utilizes threshold-based activation to prevent toggling until a minimum scroll distance is reached and applies CSS-class driven styling to trigger visual transitions on the bound HTML elements.

Features

  • Visibility Controllers - Provides a controller that hides the navigation bar on scroll down and reveals it on scroll up.
  • Scroll-Direction Triggers - Tracks scroll deltas to determine if the user is moving up or down to toggle header visibility.
  • Scroll-Position Event Triggers - Monitors vertical scroll offsets to trigger header visibility transitions.
  • DOM Manipulation Tools - Dynamically modifies the CSS and visibility of DOM elements in response to scroll events.
  • Scroll-Based - Implements a scroll-driven user experience that toggles header visibility to maximize available screen space.
  • Header Visibility Controllers - Acts as a specialized controller for toggling page header visibility based on scroll direction.
  • Scroll-Offset Thresholds - Prevents header toggling until a minimum number of pixels have been scrolled from the top.
  • Scroll Spy Components - Functions as a scroll-aware component that updates the navigation state based on viewport position.
  • Responsive Web Interfaces - Optimizes the vertical viewport for responsive web interfaces by dynamically hiding the header.
  • Scroll Effects - Hides headers until needed during scroll.
  • Scrolling Effects - Hides/shows header based on scroll.

Star history

Star history chart for wickynilliams/headroom.jsStar history chart for wickynilliams/headroom.js

How this analysis was created: This summary and feature list were written by an AI model that read the project's README and public documentation pages. Each feature links to the documentation it came from; stars, license and language come straight from the GitHub API. The model does not read the source code, and the analysis is refreshed when the project is re-analysed. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Open-source alternatives to Headroom.js

Similar open-source projects, ranked by how many features they share with Headroom.js.
  • prinzhorn/skrollrPrinzhorn avatar

    Prinzhorn/skrollr

    18,426View on GitHub↗

    Skrollr is a dependency-free scroll-driven animation engine and cross-platform frontend library. It functions as a toolkit for linking CSS properties and HTML attributes to scroll positions to create synchronized animations, specifically providing utilities for the interpolation of SVG attributes. The library enables the creation of parallax scrolling and interactive web storytelling by mapping scroll offsets to specific style values. It allows for the development of non-linear movement and dynamic SVG effects through the use of custom HTML attributes that define keyframes. The system covers

    HTML
    View on GitHub↗18,426
  • russellsamora/scrollamarussellsamora avatar

    russellsamora/scrollama

    5,982View on GitHub↗

    Scrollama is a JavaScript library for scroll-driven storytelling that uses the browser's native IntersectionObserver API to trigger step-based callbacks and animations as the user scrolls through a page. It pins graphic elements using CSS sticky positioning while scrolling through associated text steps, enabling side-by-side narrative experiences without JavaScript-driven layout calculations. The library provides a configurable offset threshold system that accepts a single global offset or per-element data-attribute offsets to define the viewport position that triggers step events. It reports

    HTML
    View on GitHub↗5,982
  • codermjlee/mjrefreshCoderMJLee avatar

    CoderMJLee/MJRefresh

    13,814View on GitHub↗

    MJRefresh is a scroll view interaction library and a set of reusable UI components for implementing pull-to-refresh and infinite scrolling behaviors in mobile user interfaces. It provides customizable refresh indicators and controllers that manage reload callbacks and loading states within scrollable containers. The library allows for the replacement of standard loading indicators with custom images, GIF sequences, and status labels to match specific visual branding. It includes a global configuration store to handle dynamic UI localization and the translation of refresh content across an app

    Objective-Cobjective-crefresh
    View on GitHub↗13,814
  • imakewebthings/waypointsimakewebthings avatar

    imakewebthings/waypoints

    10,317View on GitHub↗

    Waypoints is a JavaScript library designed for monitoring scroll positions and managing viewport-based triggers. It provides utilities to execute functions when page elements enter or exit the visible browser area, track specific scroll offsets, and implement sticky element pinning. The library includes specialized tools for building infinite scrolling interfaces that fetch and append content to replace traditional pagination. It also manages the positioning of elements that transition to a fixed screen location once a specific scroll threshold is reached. The system covers broader capabilit

    JavaScript
    View on GitHub↗10,317
See all 30 alternatives to Headroom.js→

Frequently asked questions

What does wickynilliams/headroom.js do?

headroom.js is a client-side JavaScript header visibility controller and DOM manipulator. It functions as a scroll-based UI component that hides page headers during downward scrolls and reveals them during upward scrolls to maximize available viewport space.

What are the main features of wickynilliams/headroom.js?

The main features of wickynilliams/headroom.js are: Visibility Controllers, Scroll-Direction Triggers, Scroll-Position Event Triggers, DOM Manipulation Tools, Scroll-Based, Header Visibility Controllers, Scroll-Offset Thresholds, Scroll Spy Components.

What are some open-source alternatives to wickynilliams/headroom.js?

Open-source alternatives to wickynilliams/headroom.js include: prinzhorn/skrollr — Skrollr is a dependency-free scroll-driven animation engine and cross-platform frontend library. It functions as a… codermjlee/mjrefresh — MJRefresh is a scroll view interaction library and a set of reusable UI components for implementing pull-to-refresh… russellsamora/scrollama — Scrollama is a JavaScript library for scroll-driven storytelling that uses the browser's native IntersectionObserver… imakewebthings/waypoints — Waypoints is a JavaScript library designed for monitoring scroll positions and managing viewport-based triggers. It… react-bootstrap/react-bootstrap — React Bootstrap is a frontend component framework and responsive UI kit that translates the Bootstrap CSS framework… fomantic/fomantic-ui — Fomantic-UI is a component-based CSS library and frontend design system used to build consistent, responsive user…