Loading...
Bootscore v6 is here! Learn more

Documentation Theme

Scrollspy

Enhance navigation with Bootstrap Scrollspy in the navbar, dynamically highlighting active sections as users scroll through your webpage.

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.

2 Comments on “Scrollspy”

  • Arthur Barkhuysen

    says:

    Great theme, one question are you planing on removing jQuery from BootScore?

    • Basti

      says:

      Hi Arthur,

      thank you very much.

      jQuery is integrated by WordPress, not by bootScore and is used by almost all WP plugins. So, switching to pure JS does not bring any clear advantages and coding becomes much more complicated. The answer is: Not planned yet.

      Hope that helps

      Basti

Comments are closed.

To top