How to Create Scrolling Transition on Header Using Next.js 15 and Tailwind CSS

Creating smooth scrolling transitions for sticky header is a great way to enhance the user experience of your website. It helps to make your website look more professional and visually appealing while maintaining a functional design. In this article I’ll show you the steps to implement a scrolling transition on your website's header that changes its appearance dynamically based on the scroll position.

Step 1: Building the Header Component

First create a header component with HTML structure and decorate it with TailwindCSS.

<header
      className={`fixed top-0 left-0 right-0 z-50`}
    >
      <div className="container mx-auto flex items-center gap-6">
        <Link href={"/"}>
          <Image
            src={logo}
            alt="VegCart"
            width={200}
            height={40}
            className={`transition-all ease-linear h-auto`}
          />
        </Link>
        <nav className="ml-auto">
          <ul className="flex items-center gap-8">
            <li>
              <Link
                href={""}
                className={`flex gap-2 items-center font-medium text-white hover:text-opacity-75 transition-all ease-linear`}
              >

                Hi, User
              </Link>
            </li>
            <li>
              <Link
                href={""}
                className={`flex gap-2 items-center font-medium text-white hover:text-opacity-75 transition-all ease-linear`}
              >
                Offers
              </Link>
            </li>
            <li>
              <Link
                href={""}
                className={`flex gap-2 items-center font-medium text-white hover:text-opacity-75 transition-all ease-linear`}
              >
                Cart
              </Link>
            </li>
          </ul>
        </nav>
      </div>
</header>

Step 2: Create State Variable and Scroll Handler Function

Create a React state variable using useState hook. Then create a handleScroll function to update the state variable if position is greater than 200.

const [isScroll, setIsScroll] = useState(false);

const handleScroll = () => {
    const scrolled = window.scrollY;
    setIsScroll(scrolled > 200);
};

Step 3: useEffect Hook: Listens to The Scroll Event

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

Step 4: Styling the Header Transition

Tailwind CSS makes it easy to add smooth transitions. In the Header component, the transition-all and ease-linear classes ensure a smooth background color and resize transition. You can customize the header further by adjusting the padding, colors, or animations.

<header
      className={`fixed top-0 left-0 right-0 z-50 transition-all ease-linear  ${
        isScroll ? "bg-green py-1" : "py-2"
      }`}
    >
    <Image
           ...
            className={`transition-all ease-linear h-auto ${
              isScroll ? "w-36 " : "w-40"
            }`}
    />

   <ul>
        <li>
            <Link href={""}
                className={`flex gap-2 items-center font-medium text-white hover:text-opacity-75 transition-all ease-linear ${
                  isScroll ? "text-base" : "text-lg"
                 }`}
              >...</Link>
        </li>
    </ul>
</header>

Conclusion

Adding a scrolling transition for your e-commerce website header in Next.js 15 and Tailwind CSS is both simple and effective. By leveraging React's state management and Tailwind's utility classes, you can build dynamic, visually appealing headers that enhance your site's user experience. Try adding other features, like hamburger menus or smooth scrolling animations, to take your header to the next level!