How to make Accordion Trigger Sticky

[victormongi]

is there any way to make this sticky?

Thank you all.

[viniciusofp]

Just had to face this, here is what I've found:

When the element is rendered, AccordionTrigger is wrapped inside a h3. Like this:

<h3
  data-orientation="vertical"
  data-state="open"
  class="flex"
>
  // This button is AccordionTrigger
  <button
    type="button"
    aria-controls="radix-:r14:"
    aria-expanded="true"
    data-state="open"
    data-orientation="vertical"
    id="radix-:r13:"
    class="..." // Applying "sticky top-0" here won't work as expected because h3 is the parent, not AccordionItem.
    data-radix-collection-item=""
  >
    ...
  </button>
</h3>

I was able to make it work by wrapping AccordionTrigger inside a div with "sticky top-?" classes. Here is the code in my case:

<div className="sticky top-0">
  <AccordionTrigger>
    ...
  </AccordionTrigger>
</div>

[victormongi]

Thank you ill check that out