如何使用 scrollspy 在顶部下拉导航中显示当前部分名称？答案

【问题标题】：How can I display the current section name in a top dropdown nav using scrollspy?如何使用 scrollspy 在顶部下拉导航中显示当前部分名称？
【发布时间】：2019-10-30 13:16:26
【问题描述】：

我想使用 bootstrap scrollspy 在下拉选项卡上显示该部分的名称。当我现在滚动时，我只看到section（我将排除它），我希望在下拉栏中看到当前部分，就像它未打开时一样。因此，当我在滚动时触摸section 2 时，我希望在顶部的下拉栏中看到section 2。首先，我当然希望栏显示section 1。

这是我的代码：https://codepen.io/alyssaalex/pen/rNNGrLy

如果有人能在这方面提供一些帮助，我将不胜感激。谢谢！

【问题讨论】：

如果您打开下拉菜单，您可以在滚动条上看到第 1 部分和第 2 部分显示分别被选中。当滚动到达第 1 节或第 2 节时，您可以切换为打开的下拉菜单。
抱歉不清楚，我已经更新了我的问题。我希望当前部分显示在下拉栏上（未展开时），当然，展开时下拉栏的现有功能仍然存在。
我为你创建了一个演示。请尝试一下，如果有任何问题，请告诉我。

标签： html css bootstrap-4 scrollspy

【解决方案1】：

您需要在部分更改时触发事件。然后获取部分名称并放在下拉标题中。

在你的 JS 中添加这段代码

$(".navbar").on("activate.bs.scrollspy", function(){
  $("#section_ddl").html('');
  var sections = new Array("Section 1", "Section 2");
  var x = $(".nav li.active > a").text();
  if(sections.indexOf(x) != -1){
    $("#section_ddl").html(x + '<span class="caret"></span>');
  }
  else {
    $("#section_ddl").html('Section <span class="caret"></span>');
  }
});

如果添加/删除部分，只需将部分名称放在sections 数组中即可。

注意：section_ddl 是下拉列表的 id。

You can see the working example here

【讨论】：

非常感谢。我对其进行了一些修改以满足我的需要，并且效果很好！