Sticky accordion header whilst open

I am trying to make an accordion where the open tab will stay at the top whilst scrolling down the page. The currently open tab should remain there and close if pressed.

I am currently generating the accordions through templates as shown below

<script type="text/template" id="accordion-item-template">
<div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="###NAME##"><i class="bi bi-eye-slash ##VISIBLE##"></i>##TEXT##</button>
    </h2>
    <div id="##NAME##" class="accordion-collapse collapse" data-bs-parent="###PARENT##-accordion">
        <div class="accordion-body" id="##NAME##-accordion-body"></div>
    </div>
</div>

I am using the following classes to attempt this but I am unable to have it working where the open accordion header is the one that remains sticky to the page

@media only screen and (max-width: 767px) {
.nofloat {
    float: none;
    padding: 10px 15px;
}
}

.fixed {
top: 0;
position: fixed;
width: auto;
display: none;
border: none;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}

I have now used the following CSS class which has made the open accordion header sticky, however the header appears behind the accordion body

.accordion-header.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px; }