idontdota
idontdota
PostsComments
KPCKevin Powell - Community
Created by idontdota on 1/18/2024 in #front-end
Sticky div in a Grid Column
<div class="grid grid-cols-3">
  <article class="col-span-2">
  </article>
  <article class="col-span-1 relative">
    <section class="sticky">
      contents
    </section>
  </article>
</div>
<div class="grid grid-cols-3">
  <article class="col-span-2">
  </article>
  <article class="col-span-1 relative">
    <section class="sticky">
      contents
    </section>
  </article>
</div>
Above is a 3 column grid. In my last column, I have a section which I want to make it to stick relative to its parent while the user scrolls down - i.e. a box in the rightmost column sticks to the top while user scrolls down, and ends the scrolling when the grid parent ends. This is similar to Kevin's video here: https://youtu.be/fF_NVrd1s14?si=mhHzxXGjQq0k4ZdE&t=1398 However, I am unable to make it stick, im guessing due to the grid. Kevin was using flex in the video.
6 replies