Bootstrap 3 - 在页面滚动上有粘性手风琴标题

Question

我正在使用 Bootstrap 3，并且希望能够让手风琴标题文本替换导航栏中的一些文本：

<nav>
  <div id="current"></div>
</nav>

我希望此操作如下所示：

• 当手风琴部分到达页面顶部时（用户向下滚动），将 <div id"current"></div> 的文本内容更改为手风琴的 h1 的文本内容。
• 当页面在顶部时，将<div id"current"></div>设置为空白

我应该使用什么 javascript/jQuery/Bootstrap3 JS 代码来实现这一点？

示例 Bootstrap 3 collapse（手风琴）

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

<h4 class="panel-title"><a .... > Foo </a</h4> 中的上述片段是我希望在屏幕上从页面的可见部分向上或向下移动到前一个片段时捕获的内容。因此，如果Foo 位于页面上方，但您仍在那个折叠面板内容中，那么Foo 将显示在我第一次提到的<div> 标记中。如果Foo 是（假设是页面下方的1/2），并且Bar 的一部分（不同的段）是部分可见的，那么Bar 将显示在第一个提到的<div> 中。最后，如果用户位于页面顶部，那么首先提到的<div> 将不会显示任何内容。

我希望这有助于澄清。我在不同的网站上看到过这类功能的一些例子，但是我从来没有真正检查过代码，因为这不是我当时正在做的事情——更多的是网站上的一个很酷的功能。具有此功能的特定网站现在深埋在 Google 的黑暗角落中。

Answer 1

正如您提到的滚动检测很容易，最后的挑战似乎是检测当前选择了哪个手风琴。

转到bootstrap 的示例并在折叠和展开元素时检查元素。

展开时，展开后的内容有以下类

<div id="collapseOne" class="panel-collapse collapse in" style="height: auto;">

当折叠时：

<div id="collapseOne" class="panel-collapse collapse" style="height: auto;">

所以我们可以通过搜索具有所有三个类panel-collapse collapse in的div来找到当前活动的div，检查它具有哪个ID（在本例中为collapseOne）并在代码中保留与这些行对应的标题列表和触发滚动事件后将它们分配给您的标题。

获取开放式手风琴的 JS 应该是这样的（你已经使用了 JQuery）

var titles = {
    collapseOne: "title for section 1",
    collapseTwo: "title for section 2",
};
function getCurrentTitle(){
    var selectedID = $(".panel-collapse.collapse.in")[0].id;
    $("#current").html(titles[selectedID]);
}