css Question posted in
Some basic documentation can be found here.

Css – Why my sticky position don't work like it should be?

<div className="bg-yellow-200 z-10 ">
        <div className="flex flex-row h-[1000px] ">
          <div className="flex flex-col gap-4 w-1/2">
            <div className="h-40 w-96 bg-green-200"></div>
            <div className="h-40 w-96 bg-green-200"></div>
            <div className="h-40 w-96 bg-green-200"></div>
          </div>

          <div className="w-1/2 bg-blue-400 z-50">
            <div className="sticky top-0 left-0 right-0  w-40 h-40 bg-red-500 z-50">
              <p>sticky</p>
            </div>
          </div>
        </div>
      </div>

I tried to make red box to be sticky in area of yellow box. but may be i wrote something wrong so it doesn’t work. Please help me. Thanks 🙂

I want the red box to stick at the top when i scroll down, and red box will stop sticky when I scroll pass the area of yellow box
Detail of what i want to achieve

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found what the problem is. I wrapped my code in the layout,when I comment out the style in layout it work fine

    const Layout: React.FC<LayoutProps> = ({ children }) => {
  const ref = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={ref}
   // style={{
      //   position: "relative",
      //   width: " 100%",
      //   height: "100%",
      //   overflow: "auto",
      //   touchAction: "auto",
      // }}      id="a"
    >
      {children}
      <Scene
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          width: "100vw",
          height: "100vh",
          pointerEvents: "none",
        }}
        eventSource={ref}
        eventPrefix="client"
      />
    </div>
  );
};

export { Layout };

    export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Layout>
          
          <SmoothScroll>
          <NavBar />
          {children}
          </SmoothScroll>
          <Footer2 />
        </Layout>
      </body>
    </html>
  );
}

    Thanks for helping


  2. 0

    The code provided does what you want it to do. The red box does get stuck to the top when you scroll down and it gets unstuck when you scroll past the yellow container box. I think you’re unable to notice this because you do not have enough scroll area. So I added a new div around the content and gave it a larger height.

    <div className="min-h-[2000px]">
     <div className="bg-yellow-200 z-10 ">
         <div className="flex flex-row h-[1000px] ">
               <div className="flex flex-col gap-4 w-1/2">
                    <div className="h-40 w-96 bg-green-200"></div>
                    <div className="h-40 w-96 bg-green-200"></div>
                    <div className="h-40 w-96 bg-green-200"></div>
               </div>

               <div className="w-1/2 bg-blue-400 z-50">
                    <div className="sticky top-0 left-0 right-0  w-40 h-40 bg-red-500 z-50">
                        <p>sticky</p>
                    </div>
               </div>
         </div>
      </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search