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.

CodePudding user response：

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>