Bootstrap Scrollspy не работает: Scrollspy не является функцией

Question

Я создаю одностраничный веб-сайт и пытаюсь получить ссылки навигационной панели, чтобы отразить, в каком разделе страницы вы находитесь. Я пытался использовать его через HTML безуспешно. У меня был этот код на контейнере, который содержит мои различные разделы

<div class="container" data-spy="scroll" data-target="#navbar">

и тело настроено на относительное.

Так как это не сработало, я попытался использовать Scrollspy с javascript, используя это

$('.container').scrollspy({ target: '#navbar' })

Тоже без удачи. У меня есть jQuery CDN до начальной загрузки, но я получаю эту ошибку в консоли. Uncaught TypeError: $ (...). Scrollspy не является функцией

CodePen: https://codepen.io/kjardine/pen/VqEbaz

Answer 1

Если вы проверите свою консоль, вы увидите ошибку. Bootstrap 4 (на данный момент) требует дополнительного js-скрипта для правильной работы. Добавьте popper.js до загрузки файла Bootstrap 4 js, и Scrollspy будет работать нормально. Вот код: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js.

Я также предлагаю добавить немного смещения, чтобы компенсировать высоту панели навигации. Таким образом, ссылки будут светиться в нужное время при прокрутке или нажатии. Вы можете сделать это в своем JS так:

$('body').scrollspy({ target: '#navbar-example', offset: 50 });