Easy Scrollspy setup for BB theme users running full Bootstrap 4 or anyone using Bootstrap 4 with/without BB

_BeaverBuilder-Scrollspy-Bootstrap.md

Easy Scrollspy setup for BB theme users running full Bootstrap 4 or anyone using Bootstrap 4 with BB.

For BB theme, enable full bootstrap 4 under customize > General > Layout (Or load it from CDN on a single page if not using it sitewide)

JS file add to BB page JS directly or load via external file in footer defered.

Currently using it with PowerPack's Table of Contents module, but this could be used for any list/menu of links, just change the data-target attribute.

I referred to this documentation when setting up https://getbootstrap.com/docs/4.6/components/scrollspy/

link_styles.css

//needed for the ID's created/inserted by powerpack's table of contents to be detected by scrollspy
span:has(~ .fl-heading) {
    display: block;
}
//style active state
.nav-link.active {
    // whatever active styles you want
    //color: #2D657A !important;
}

scrollspy_attributes.js

jQuery(document).ready(function ($) {
  //  add nav-link class to the links via js if using a module and you don't have access to the html directly
  $(".pp-toc-list-wrapper a").addClass("nav-link");
  // add dat-spy attibute to body or div that you want to spy on 
  $("body").attr("data-spy", "scroll");
  // offset the scroll for sticky header/menu  
  $("body").attr("data-offset", "150");
  // target the menu/list/div that contains the links you want highlighted
  $("body").attr("data-target", ".pp-toc-list-wrapper");
});