Loading...

Scrollspy / Onepager

If the page is operated as an onepager, 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

In Bootstrap 4, Scrollspy was activated by default and worked without any problems. In Bootstrap 5 it must be activated first and exactly done what Scrollspy want. Scrollspy got very bitchy and I hope Bootstrap improves it.

Usage

Onepager

Set up a page, fill it with content and give every part an unique id. Scrollspy need the ids, otherwise it will throw Javascript errors on every scroll event.

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

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

Now navigate in the backend to Appearance > Menus and set a Custom Link only in the short version to the anchor.

#one

https://mydomain.com/#one

Second example is wrong, Scrollspy will not work and throws errors.

Do not mix links to sections with other link types

Scrollspy will only accept a menu with short anchor links to existing ids on the same page.

href=”#one”
href=”#two”
href=”#three”
href=”#four”

href=”#one”
href=”#two”
href=”#three”
href=”#four”
href=”https://external-url-or-link-to-page.com”

Second example is wrong, Scrollspy do not allow any kind of link in that menu that links not to a section id on the current page. No external url, no link to page, nothing.

Activate

Now Scrollspy must be activated only on this page. Use a function to activate on scrollspy page by id:

// Activate Scrollspy on page by id
function add_scrollspy() {
    if( is_page('2257') ) { // Page id
      echo "<script>
        jQuery(document).ready(function ($) {
            var scrollSpy = new bootstrap.ScrollSpy(document.body, {
                target: '#bootscore-navbar',
                offset: 58
            })
        });
      </script>\n";
   }
}
add_action( 'wp_footer', 'add_scrollspy', 0 );

Code goes to functions.php in child-theme. Replace 2257 in line 4 with your page id and set offset in line 9 to the height of your navbar. You will find the id of your page in page edit screen in browser url /wp-admin/post.php?post=2257&action=edit.

Refresh

If elements are added or removed from the DOM (example bS Isotope), there is a refresh method for this. The simple answer is:

This does not work yet! The menu links are highlighted wrong.

Navbar

The collapsed navbar will close by itself by clicking a nav-link.

Mixed Onepager / Multipager

It is rare that an onepager is a real onepager. There are always pages like privacy, terms etc. which are better placed on their own pages. Likewise, the individual sections in a onepager often have links to further information. For these kind of websites, only the front page is an onepager, all others are normal static pages.

This theme has a script that scrolls to id from external url. By clicking the download button in the navbar, you will be taken to the top of the front page first, and then scrolled down to the download section. This link #four leads directly to <section id="four">...</section> on the onepage demo site. This will always guide you to the right place from external links.

For this, the menu links are required in full length. As described above, Scrollspy may only be activated on the one-pager side. Two different menus are required for this. I use conditional menus plugin which exchanges the menus.

Create a menu and name it for example “Main Menu Onepager” and set the links:

#one

Create a second menu and name it for example “Main Menu” with the same link names and set the links:

https://mydomain.com/#one

Now go to Appearance > Menus > Manage Locations and set the Main Menu to “main_menu”. Click the link “+ Conditional Menu” and set the “Main Menu Onepager” to the onepager site only.

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

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information