I need assistance in making the component within my grid sticky, i am using tailwindcss react/nextjs. The “back button” is just a button, the “footer” is just my name and the {children} element is a two screen tall wall of text.
Layout component, wrapping page.tsx:
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Footer from "@/components/ui/Footer";
import BackButton from "@/components/ui/BackButton";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "title",
description: "desc",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<div className="md:grid md:grid-cols-[1fr_50%_1fr] md:w-full mx-auto my-10 md:my-0 sm:w-4/6 w-5/6 flex flex-col gap-6 justify-center">
<div className="flex flex-col items-start md:justify-start md:items-center md:mt-[200px] bg-blue-600">
<div className="md:sticky bg-red-400 md:top-0">
<BackButton />
</div>
</div>
<div className="justify-center bg-green-700 items-center md:wrapper-div transition-all duration-500">
{children}
<Footer />
</div>
</div>
</body>
</html>
);
}
Page.tsx is just a wall of text 200vh tall.
this is a snippet of my code found in layout on my react/nextjs app, i am using tailwind, can someone help me with why my back button is not working as intended? (it is meant to be position sticky)
I Have tried various solutions and asked chat gpt but to no avail.
5
The sticky class requires that the element’s parent container doesn’t interfere with the sticky behavior, which could happen if there’s no space for the element to scroll within or if the layout creates unexpected behavior.
In your case, the grid layout might be causing issues, especially the way flex, grid, and sticky behave together.
You may try to adjust your layout as:
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<div className="md:grid md:grid-cols-[1fr_50%_1fr] md:w-full mx-auto my-10 md:my-0 sm:w-4/6 w-5/6 gap-6 justify-center">
<div className="md:flex flex-col items-start md:items-center bg-blue-600">
<div className="md:sticky md:top-[100px] bg-red-400">
<BackButton />
</div>
</div>
<div className="bg-green-700 transition-all duration-500">
{children}
<Footer />
</div>
</div>
</body>
</html>
);
}
where following three adjustments have been made:
- Moved the sticky class directly on the element holding the BackButton and ensured
md:top-[100px]sets the top sticky distance correctly. - Removed unnecessary
flexclasses in the outer containers that could interfere with the layout. - The
stickyelement is now inside a simpler flex container, which should avoid conflicts with grid layout behavior.
As a side note:
stickyonly works if there’s enough scrollable content. Make sure your children content is large enough (it seems like you have a200vhtall element, so that should work).- ensure that nothing breaks scroll behavior. If you are using
overflow: hiddenor something similar on parent containers, it can prevent sticky from working properly.