Sticky accordion header whilst open-CodePudding

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 >
    <h2  id="headingOne">
        <button  type="button" data-bs-toggle="collapse" data-bs-target="###NAME##"><i ></i>##TEXT##</button>
    </h2>
    <div id="##NAME##"  data-bs-parent="###PARENT##-accordion">
        <div  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;
}

CodePudding user response：

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; }