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.
The collapsed offcanvas navbar closes by itself by clicking a nav-link.
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