Reactstrap Headroom Js

Pro Component

Headroom.js is a lightweight, high-performance JS widget (with no dependencies) that allows you to react to the user’s scroll.


We only have one example, the DemoNavbar (component which is used in all of our example pages), uses this plugin. Please check it out in its file (src/components/navbars/DemoNavbar.js), and on any of our live example pages.

Usage and Initialization

import React from "react";
// JavaScript plugin that hides or shows a component based on your scroll
import Headroom from "headroom.js";
// reactstrap components
// import {
// } from "reactstrap";

function Example() {
  React.useEffect(() => {
    let headroom = new Headroom(document.getElementById("id-of-your-element"));
    // initialise
  return (
      {/* ... your code here */}

export default Example;


If you want to see more examples and properties please check the official Headroom.js Documentation.

You can also check the Official Github Repository.