Как я могу отобразить имя текущего раздела в верхнем выпадающем меню, используя scrollspy?

Question

Я хочу отобразить название раздела на раскрывающейся вкладке с помощью начальной загрузки scrollspy. Когда я прокручиваю сейчас, я вижу только section (который я бы исключил), и я хотел бы видеть текущий раздел в раскрывающемся меню, когда он не открыт. Поэтому, когда я нажимаю section 2 во время прокрутки, я хотел бы видеть section 2 в выпадающем меню сверху. Сначала, конечно, я бы хотел, чтобы на панели отображалось section 1.

Это мой код: https://codepen.io/alyssaalex/pen/rNNGrLy

Буду признателен, если кто-то сможет оказать некоторую помощь в этом отношении. ,Спасибо!

Answer 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 - это идентификатор раскрывающегося списка.

Рабочий пример можно посмотреть здесь