javascript - Bootstrap 3 - 在页面滚动上有粘 Accordion 标题

Question

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

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

我希望此操作按如下方式工作:

• 当 Accordion 部分到达页面顶部(用户向下滚动)时，更改 <div id"current"></div> 的文本内容用 Accordion 的文字内容h1 .
• 当页面在顶部时，设置<div id"current"></div>空白

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

示例 Bootstrap 3 collapse ( Accordion )

<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在页面上方，但您仍在该 Accordion 面板内容中，然后 Foo将显示在 <div> 中我首先提到的标签。如果Foo是(比方说页面下方的 1/2)，以及 Bar 的一部分(不同的部分)部分可见，然后 Bar将显示在第一个提到的 <div> 中.最后，如果用户位于页面顶部，则 <div>首先提到的不会显示任何内容。

我希望这有助于澄清。我在各种网站上看到过此类功能的一些示例，但是我从未真正检查过代码，因为当时我并没有这样做——它更像是网站上的一个很酷的功能。具有此功能的特定站点现在深埋在 Google 的黑暗 Angular 落中。

Answer 1

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

转到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 ) 并在代码中保留与这些行对应的标题列表，并在触发滚动事件后将它们分配给您的标题。

获取打开 Accordion 的 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]);
}