Проблемы с Scrollspy при использовании Bootstrap4 и группы списков

Question

Я обновил свое приложение для использования Boostrap 4.1, и теперь я получаю странное поведение при использовании ScrollSpy. Я пытаюсь создать складное меню и использую элемент list-group / list-group-item. Однако по какой-то причине при прокрутке вниз от первого элемента ко второму свиток переходит к основному якору (в главное меню), а не остается на первом элементе (пока не достигнет второго).

Извините, если мое объяснение проблемы не является точным, но я уверен, что эта скрипка поможет лучше понять ее:

http://jsfiddle.net/aq9Laaew/189549/

Это меню:

<nav class="list-group fixedMenu" id="list-example">
      <a href="#menuSpy" data-toggle="collapse" class="list-group-item" aria-expanded="true">
          <span>Main Menu</span>
      </a>
      <ul class="sub collapse show" id="menuSpy">
          <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
          <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
          <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
          <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
      </ul>
</nav>

И это содержание:

<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
    <h4 id="list-item-1">Item 1</h4>
    <p>...</p>
    <h4 id="list-item-2">Item 2</h4>
    <p>...</p>
    <h4 id="list-item-3">Item 3</h4>
    <p>...</p>
    <h4 id="list-item-4">Item 4</h4>
    <p>...</p>
</div>

Любая помощь приветствуется!

Заранее спасибо.

Answer 1

Целевое меню прокрутки должно быть #menuSpy. В противном случае он будет нацелен на первую ссылку в примере списка при прокрутке.

$('body').scrollspy({
    target: '#menuSpy'
});

http://jsfiddle.net/o7tf53ce/

Обновлено с несколькими меню: https://www.codeply.com/go/aMpKp07E0t