DEV Community

Cover image for Build a sticky navigation bar with React
Ibrahima Ndaw
Ibrahima Ndaw

Posted on • Updated on • Originally published at ibrahima-ndaw.com

Build a sticky navigation bar with React

I'm pretty sure that you've already seen the effect we are going to make today - It's a common animation that we see on a lot of websites. When the user scrolls, the navigation bar moves down with a cool animation effect.

You're lucky today because, in this post, we'll replicate the same effect with React by building a sticky navbar from scratch with a custom hook.

You can check it live here

Originally posted on my blog

Setting up the project

To be able to follow along, you need to create a fresh React app by running the following command:

npx create-react-app react-sticky-navbar
Enter fullscreen mode Exit fullscreen mode

Next, structure your folder as follows.

src
├── App.js
├── App.test.js
├── assets
|  └── images
|     └── logo.svg
├── components
|  └── Header
|     ├── About.js
|     ├── Navbar.css
|     ├── Navbar.js
|     ├── Welcome.css
|     └── Welcome.js
├── hooks
|  └── useSticky.js
├── index.css
├── index.js
├── serviceWorker.js
└── setupTests.js
Enter fullscreen mode Exit fullscreen mode

I will focus mostly on the navbar related files to make this post short and useful. You can still find the source code at the end of the article.

Let's now get hands dirty by writing some code.

  • Header/Welcome.js
import React from "react"

import "./Welcome.css"
import Logo from "../../assets/images/logo.svg"
import About from "./About"

const Welcome = ({ element }) => {
  return (
    <main>
      <section className="welcome">
        <div ref={element}>
          <img src={Logo} alt="logo" className="welcome--logo" />
          <p>Even if you scroll, i will stick with you</p>
          <button className="welcome__cta-primary">Contact us</button>
        </div>
      </section>
      <About />
    </main>
  )
}

export default Welcome
Enter fullscreen mode Exit fullscreen mode

As you can see, here we have a simple component that receives the props element. This last is the reference of the element that will fire the sticky effect later on the scrolling.

By the way, here I use destructuring to pull out the element. If you want too, you can use props.stickyRef.

Now, let's move on to the next file and create the navigation bar skeleton.

  • Header/Navbar.js
import React from "react"
import "./Navbar.css"
import Logo from "../../assets/images/logo.svg"

const Navbar = () => (
  <nav className="navbar">
    <div className="navbar--logo-holder">
      <img src={Logo} alt="logo" className="navbar--logo" />
      <h1> Stick'Me</h1>
    </div>
    <ul className="navbar--link">
      <li className="navbar--link-item">Home</li>
      <li className="navbar--link-item">About</li>
      <li className="navbar--link-item">Blog</li>
    </ul>
  </nav>
)
export default Navbar
Enter fullscreen mode Exit fullscreen mode

Here, we have for now a very simple component. But later we will update it to be able to display some elements conditionally. And also make the navigation bar sticky.

gif-1

The sticky effect

For the sticky effect, we will create a custom hook to handle the effect and then use it in our component and at the same time, make it reusable.

  • hooks/useSticky.js
import { useEffect, useState, useRef } from "react"

function useSticky() {
  const [isSticky, setSticky] = useState(false)
  const element = useRef(null)

  const handleScroll = () => {
    window.scrollY > element.current.getBoundingClientRect().bottom
      ? setSticky(true)
      : setSticky(false)
  }

  // This function handle the scroll performance issue
  const debounce = (func, wait = 20, immediate = true) => {
    let timeOut
    return () => {
      let context = this,
        args = arguments
      const later = () => {
        timeOut = null
        if (!immediate) func.apply(context, args)
      }
      const callNow = immediate && !timeOut
      clearTimeout(timeOut)
      timeOut = setTimeout(later, wait)
      if (callNow) func.apply(context, args)
    }
  }

  useEffect(() => {
    window.addEventListener("scroll", debounce(handleScroll))
    return () => {
      window.removeEventListener("scroll", () => handleScroll)
    }
  }, [debounce, handleScroll])

  return { isSticky, element }
}

export default useSticky
Enter fullscreen mode Exit fullscreen mode

All the magic will happen here (i promise).
We first need to import a couple of hooks from React. And next, define our state with useState() and set the initial state to false. That means, now, we'll be able to switch between true and false depending on the scrolling.

gif-2

When the user starts scrolling, the function handleScroll() will be called. And, it checks if the window.scrollY > stickyRef.current.getBoundingClientRect().bottom and handles the isSticky state.
In other words, it will check if the number of pixels the page has currently scrolled along the vertical axis is superior or not to the position of the current element relative to its bottom.

Next, we use a debounce function to throttle the scrolling event and avoid performance issues. This function, instead of running handleScroll all the time, will just run every 20 milliseconds to give you more control.

With that, we can now listen to the scroll event when the component is mounted and remove listeners when unmounted.

Great! now to make our custom hook usable in other files, we need to return something from it. Here we need to return the isSticky state and element which allows having an element reference.

  • Header/Navbar.js
import React from "react"
import "./Navbar.css"
import Logo from "../../assets/images/logo.svg"

const Navbar = ({ sticky }) => (
  <nav className={sticky ? "navbar navbar-sticky" : "navbar"}>
    <div className="navbar--logo-holder">
      {sticky ? <img src={Logo} alt="logo" className="navbar--logo" /> : null}
      <h1> Stick'Me</h1>
    </div>
    <ul className="navbar--link">
      <li className="navbar--link-item">Home</li>
      <li className="navbar--link-item">About</li>
      <li className="navbar--link-item">Blog</li>
    </ul>
  </nav>
)
export default Navbar
Enter fullscreen mode Exit fullscreen mode

As you can see, this file receives now as props the sticky state. We can now check if it's true or false and show classes or elements conditionally with the help of the ternary operator.

We have covered a lot, however, it remains an important part: styling and animations. Let's do that in the next section.

gif-3

Styling the navbar

  • In Navbar.css
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 2.5rem;
  position: absolute;
  z-index: 1;
  width: 100%;
}

.navbar-sticky {
  background: #333;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 1px 1px 1px #222;
  animation: moveDown 0.5s ease-in-out;
}

.navbar--logo {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  animation: rotate 0.7s ease-in-out 0.5s;
}

@keyframes moveDown {
  from {
    transform: translateY(-5rem);
  }
  to {
    transform: translateY(0rem);
  }
}

@keyframes rotate {
  0% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(0rem);
  }
}
Enter fullscreen mode Exit fullscreen mode

Here, besides fixing the navigation bar on scroll with the .navbar-sticky class, we use moveDown to make the animation effect which also rotates the logo a little bit to make everything look good and smooth on the scrolling.

With that, we can now use the App.js file to display our components when the page loads.

  • App.js
import React from "react"
import useSticky from "./hooks/useSticky.js"
import Welcome from "./components/Header/Welcome"
import Navbar from "./components/Header/Navbar"

function App() {
  const { isSticky, element } = useSticky()
  return (
    <>
      <Navbar sticky={isSticky} />
      <Welcome element={element} />
    </>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

As you can see, here, we import our components and the custom hook which allows us to pass down props and handle the sticky effect appropriately.

With that, we've now done building our sticky navbar using React JS.

Thanks for reading it.

You can find the Source code here

applause

Top comments (5)

Collapse
 
habprog profile image
habprog

Nice Article

Collapse
 
iarmankhan profile image
Arman Khan

Great Article✨✨

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Thanks for reading it

Collapse
 
arathfal profile image
Aradea Atfal Risdianto

Great.
But I got 'arguments' is not defined .
Can u explain to me ?

Collapse
 
thevinitgupta profile image
Vinit Gupta

Arguments are not preset in arrow functions. This is the reason for that error.

You can change the function expression to simple function syntax and it will work!!