Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Kevin-LeMasters-PixelParade/f72bcf3fad4409b01b2e965d63dbe555 to your computer and use it in GitHub Desktop.
Save Kevin-LeMasters-PixelParade/f72bcf3fad4409b01b2e965d63dbe555 to your computer and use it in GitHub Desktop.
Easy Scrollspy setup for BB theme users running full Bootstrap 4 or anyone using Bootstrap 4 with/without BB

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/

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");
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment