打开时粘手风琴头答案

【问题标题】：Sticky accordion header whilst open打开时粘手风琴头
【发布时间】：2022-06-15 00:23:16
【问题描述】：

我正在尝试制作一个手风琴，其中打开的选项卡在向下滚动页面时将保持在顶部。当前打开的选项卡应保留在那里并在按下时关闭。

我目前正在通过模板生成手风琴，如下所示

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

我正在使用以下类来尝试这样做，但我无法让它在打开的手风琴标题是仍然粘在页面上的标题中工作

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

【问题讨论】：

标签： html css twitter-bootstrap accordion bootstrap-accordion

【解决方案1】：

我现在使用了以下 CSS 类，它使打开的手风琴标题变得粘滞，但是标题出现在手风琴正文后面

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

【讨论】：