Scrollspy

ToDo:

• Activate via function
• Add Example to close drawer:

// Close offcanvas on click a, keep .dropdown-menu open 
// See https://github.com/bootscore/bootscore/discussions/347
document.addEventListener('DOMContentLoaded', function () { // Fire after bootstrap.bundle.min.js is loaded 
  const offcanvasLinks = document.querySelectorAll('.offcanvas a:not(.dropdown-toggle):not(.remove_from_cart_button)');
  const offcanvas = new bootstrap.Offcanvas(document.querySelector('.offcanvas'));

  offcanvasLinks.forEach(function (link) {
    link.addEventListener('click', function () {
      offcanvas.hide();
    });
  });
});

Click navbar # links to scroll to sections.

#one

#two

#three

#four

HTML Markup

Set up a page, fill it with content, and assign each part a unique ID. Scrollspy requires resolvable IDs:

<section id="one">
  Content
</section>

<section id="two">
  Content
</section>

In the backend, navigate to Appearance > Menus and add Custom Links:

• https://mydomain.com/#one
• https://mydomain.com/#two

Activate Scrollspy

Scrollspy needs to be activated and assigned to the elements. This example spies on the .entry-content (page content) and highlights the menu-items in #bootscore-navbar (main-nav):

jQuery(function ($) {

  // Activate Scrollspy
  $('.entry-content').scrollspy({
    target: '#bootscore-navbar'
  });

  // Refresh Scrollspy
  $('[data-spy="scroll"]').each(function () {
    $(this).scrollspy("refresh");
  });

});

Code goes to child-theme’s custom.js. The refresh snippet is only needed when adding or removing something from the DOM, for example an Isotope.

Navbar

Clicking a nav-link closes the collapsed offcanvas navbar automatically.