Loading...

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.

2 Comments on “Scrollspy / Onepager”

  • 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