Scrollspy / Onepager

5.2.0.0

If the page is operated as an one-pager, Scrollspy recognizes at which point it is being scrolled and sets an active class to the respective menu item. This menu item can be styled differently and you always know which one is currently part on the page. Live Preview

Usage

Onepager

Set up a page, fill it with content and give every part an unique id. Scrollspy need resolvable id’s.

<section id="one">
  your content
</section>

<section id="two">
  your content
</section>

Now navigate in the backend to Appearance > Menus and set Custom Links:

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

Activate

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

The collapsed offcanvas navbar closes by itself by clicking a nav-link.