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

Bootstrap 3 - 页面滚动时有粘性Accordion标题

1 个答案: