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

How can I display the current section name in a top dropdown nav using scrollspy?

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

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

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

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

在您的 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>');
  }
});

如果您 add/remove 个部分,您只需将部分名称放在 sections 数组中。

注意:section_ddl是下拉框的id。

You can see the working example here