How to make fixed element in React while in viewport

Question

I'm trying to clone the AirBnB website and I'm having a problem with the detail page reservation Box. the thing is that when we scroll from top the element will be scrollable until it's totally in viewport. after it become all visible it will stay fixed and the components next to it are scrollable. and finally when the viewport reaches certain point in the scroll it will be scrollable again.

AirBnB detail Page

so how can i make this happen? I'm using NextJS 13 and tailwindCss.

function DetailSection({ home }) {
  return (
    <div className="pt-5 flex justify-between">
      <div className="drop-shadow-md">
        <h1 className="text-lg font-light tracking-wide">{home.name}</h1>
        <h2 className="font-thin tracking-wide text-sm">
          4 bedroom <span>|</span> 2 bathroom <span>|</span> 200 sqm
        </h2>
      </div>
      <div className="w-2/6 h-72 fixed bottom-0 right-0 bg-red-300">the fixed element </div>
    </div>
  );
}

I've made the following progress so far. but when the element become active again it doesn't proceed from the position it currently is rather it will pop to it's original position.

function StickySide() {
  const [stick, setStick] = useState(false);

  function setSidebarFixed() {
    if (window.scrollY >= 210 && window.scrollY < 600) {
      setStick(true);
    } else {
      setStick(false);
    }
  }

  window.addEventListener("scroll", setSidebarFixed);
  return (
    <div
      className={`${
        stick ? "fixed bottom-10 right-20" : "relative"
      } w-72 h-72  bg-red-300`}
    >
      next
    </div>
  );
}

Answer 1

You have to make that element sticky and give position from top. Make parent section relative. And give this child section (sidebar) sticky position and give it some position from top.

Answer 2

Remove temp content. I added It just for illustrating purpose.

<main>
      <section className="bg-gray-500 h-80 flex justify-center items-center text-white text-xl ">
        upper content -- Images Etc -<br /> I gave styles to this element for
        temporary purposes. You will need to remove them and add your own
        content
      </section>

      {/* Your required section goes here */}

      <section className="border-2 border-black min-h-[60vh] relative flex">
        <div className="left-side-content w-8/12">
          {/* left side Content */}
          <h1 className="text-3xl font-bold">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate,
            quisquam? Error dolore tenetur architecto consequuntur.
          </h1>
          <p className="">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
            officiis maiores consequatur aliquid beatae quam unde ducimus earum
            inventore? Natus vero ducimus veritatis consequatur magnam beatae
            nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
            voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
            non, repellat in dolorum commodi tempora magnam nisi tempore nulla
            odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
            consequuntur inventore eaque. Veniam ducimus, similique numquam
            deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
            eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
            doloremque rerum. In sunt, beatae porro voluptatibus corrupti
            exercitationem!
          </p>
          <h2 className="text-2xl font-bold">Some Features</h2>
          <ul>
            <li>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Voluptas, enim?
            </li>
            <li>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Reprehenderit, fugiat?
            </li>
            <li>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime,
              veniam!
            </li>
            <li>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores,
              ex.
            </li>
          </ul>
          <p className="">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
            officiis maiores consequatur aliquid beatae quam unde ducimus earum
            inventore? Natus vero ducimus veritatis consequatur magnam beatae
            nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
            voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
            non, repellat in dolorum commodi tempora magnam nisi tempore nulla
            odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
            consequuntur inventore eaque. Veniam ducimus, similique numquam
            deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
            eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
            doloremque rerum. In sunt, beatae porro voluptatibus corrupti
            exercitationem!
          </p>
          <p className="">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
            officiis maiores consequatur aliquid beatae quam unde ducimus earum
            inventore? Natus vero ducimus veritatis consequatur magnam beatae
            nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
            voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
            non, repellat in dolorum commodi tempora magnam nisi tempore nulla
            odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
            consequuntur inventore eaque. Veniam ducimus, similique numquam
            deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
            eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
            doloremque rerum. In sunt, beatae porro voluptatibus corrupti
            exercitationem!
          </p>
          <p className="">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
            officiis maiores consequatur aliquid beatae quam unde ducimus earum
            inventore? Natus vero ducimus veritatis consequatur magnam beatae
            nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
            voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
            non, repellat in dolorum commodi tempora magnam nisi tempore nulla
            odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
            consequuntur inventore eaque. Veniam ducimus, similique numquam
            deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
            eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
            doloremque rerum. In sunt, beatae porro voluptatibus corrupti
            exercitationem!
          </p>
          <p className="">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
            officiis maiores consequatur aliquid beatae quam unde ducimus earum
            inventore? Natus vero ducimus veritatis consequatur magnam beatae
            nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
            voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
            non, repellat in dolorum commodi tempora magnam nisi tempore nulla
            odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
            consequuntur inventore eaque. Veniam ducimus, similique numquam
            deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
            eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
            doloremque rerum. In sunt, beatae porro voluptatibus corrupti
            exercitationem!
          </p>
          <p className="">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
            officiis maiores consequatur aliquid beatae quam unde ducimus earum
            inventore? Natus vero ducimus veritatis consequatur magnam beatae
            nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
            voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
            non, repellat in dolorum commodi tempora magnam nisi tempore nulla
            odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
            consequuntur inventore eaque. Veniam ducimus, similique numquam
            deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
            eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
            doloremque rerum. In sunt, beatae porro voluptatibus corrupti
            exercitationem!
          </p>
          <p className="">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
            officiis maiores consequatur aliquid beatae quam unde ducimus earum
            inventore? Natus vero ducimus veritatis consequatur magnam beatae
            nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
            voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
            non, repellat in dolorum commodi tempora magnam nisi tempore nulla
            odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
            consequuntur inventore eaque. Veniam ducimus, similique numquam
            deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
            eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
            doloremque rerum. In sunt, beatae porro voluptatibus corrupti
            exercitationem!
          </p>
          <p className="">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo harum
            officiis maiores consequatur aliquid beatae quam unde ducimus earum
            inventore? Natus vero ducimus veritatis consequatur magnam beatae
            nisi ullam placeat! Modi nulla sint quibusdam. Officia enim
            voluptatibus nesciunt recusandae ut ab. Enim fugiat necessitatibus
            non, repellat in dolorum commodi tempora magnam nisi tempore nulla
            odio esse libero voluptatibus quod dicta nemo ullam fuga maxime quos
            consequuntur inventore eaque. Veniam ducimus, similique numquam
            deleniti magni quidem repellat. Ullam inventore hic ipsa fugiat
            eveniet repellat tenetur aut libero, sint nostrum animi, natus magni
            doloremque rerum. In sunt, beatae porro voluptatibus corrupti
            exercitationem!
          </p>
        </div>

        {/* right side content */}
        <section className="sticky top-16 h-96 bg-blue-400 border-2 w-4/12">
          <h1 className="text-2xl text-white">Right Side Content</h1>
        </section>
      </section>

      {/* Your required section end here */}

      {/* temp content */}
      <section className="bg-gray-500 h-80 flex justify-center items-center text-white text-xl ">
        bottom content Section 1 - I gave styles to this element for temporary
        purposes. You will need to remove them and add your own content
      </section>
      <section className="bg-green-200 h-80 flex justify-center items-center text-black text-xl ">
        bottom content Section 2
      </section>
      <section className="bg-red-200 h-80 flex justify-center items-center text-black text-xl ">
        bottom content Section 3
      </section>
    </main>