How to change navbar style on scroll in React JS/Next JS
Tags: javascript, webdev, react, navbar
Published: 2022-05-13 08:12:41

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](https://magic.reactjs.net/htmltojsx.htm)
Simply paste the code copied from bootstrap navbar and paste it on this website.It will return you with jsx code.
Header.jsx
```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
```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

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