Reactstrap Headroom Js

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

Examples

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
    headroom.init();
  });
  return (
    <>
      {/* ... your code here */}
    </>
  );
}

export default Example;

Props

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

You can also check the Official Github Repository.