Css 如何在bootstrap 4中使打开的手风琴头粘滞？

有一个BS4手风琴，想要在用户向下滚动时保持打开的标题在顶部，所以手风琴打开标题的粘性行为

实际方法不起作用：

#accordion .card-header BUTTON:not(.collapsed) {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

标题保持在屏幕上方不可见

守则：

<style>
#accordion .card-header BUTTON:not(.collapsed) {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}
</style>

<div id="accordion" class="groups">
    <div class="card">
        <div class="card-header d-block d-md-none m-0 p-0">
            <h2 class="mb-0">
                <button
                    class="btn btn-link btn-block p-2"
                    data-toggle="collapse"
                    data-target="'#group-1"
                    aria-controls="'#group-1"
                    >title</button>
            </h2>
        </div>

        <div id="group-1" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
            ...
        </div>
    </div>
</div>

#手风琴.卡片标题按钮：未（.collapped）{
职位：-webkit sticky；/*Safari*/
位置：粘性；
排名：0；
}
标题
...