Today I am going to tell you one of the simplest ways to change the navbar styling on scroll.So first of all.Lets create a component Header.I am pasting the bootstrap simple code for Header just to keep things as simple as I can.To use the html css of bootstrap we have to first convert it in jsx which you can easily do by going to this website.
htmltojsx
Simply paste the code copied from bootstrap navbar and paste it on this website.It will return you with jsx code.
Header.jsx
<nav className="navbar navbar-expand-lg navbar-light bg-light"> <a className="navbar-brand" href="#">Navbar</a> <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span className="navbar-toggler-icon" /> </button> <div className="collapse navbar-collapse" id="navbarSupportedContent"> <ul className="navbar-nav mr-auto"> <li className="nav-item active"> <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a> </li> <li className="nav-item"> <a className="nav-link" href="#">Link</a> </li> <li className="nav-item dropdown"> <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div className="dropdown-menu" aria-labelledby="navbarDropdown"> <a className="dropdown-item" href="#">Action</a> <a className="dropdown-item" href="#">Another action</a> <div className="dropdown-divider" /> <a className="dropdown-item" href="#">Something else here</a> </div> </li> <li className="nav-item"> <a className="nav-link disabled" href="#">Disabled</a> </li> </ul> <form className="form-inline my-2 my-lg-0"> <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" /> <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> and its css will be
Header.css
.navbar { background-color: #a8dcef; height: 105px; width: 100%; position: fixed; z-index: 1000; border-bottom: 1px solid rgb(192, 192, 192); } Now we will use useEffect hook to
- Read the scroll position and store it in the data attribute.
- Listen for new scroll events.
- Update scroll position.
So this is the code you have to paste it in useEffect hook in Header.jsx
useEffect(() => { // The debounce function receives our function as a parameter const debounce = (fn) => { // This holds the requestAnimationFrame reference, so we can cancel it if we wish let frame; // The debounce function returns a new function that can receive a variable number of arguments return (...params) => { // If the frame variable has been defined, clear it now, and queue for next frame if (frame) { cancelAnimationFrame(frame); } // Queue our function call for the next frame frame = requestAnimationFrame(() => { // Call our function and pass any params we received fn(...params); }); } }; // Reads out the scroll position and stores it in the data attribute // so we can use it in our stylesheets const storeScroll = () => { document.documentElement.dataset.scroll = window.scrollY; } // Listen for new scroll events, here we debounce our `storeScroll` function document.addEventListener('scroll', debounce(storeScroll), { passive: true }); // Update scroll position for first time storeScroll(); }) Now Last Step.For changing the styling we can use this css.In Header.css
html:not([data-scroll="0"]) .navbar { position: fixed; top: 0; width: 100%; /* background-color: #fff; */ opacity: 0.9; box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.5); transition: 0.4s linear; } Note:-
And thats it.Now you will see a change when you scroll down.
This format can be used to change any class on scroll the format is
html:not([data-scroll="0"]) .Here Class name { /* Write the code you want to change */ } Share it if you found it helpful!
Let me know in the comments if you find any difficulty.I will be there to help you.
Thanks.