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.
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.