Bootstrap scrollspy for in-page TOC

[arnonzooz]

Hi

Has anyone managed to implement Bootstrap scrollspy with the right (in-page) toc generated by Docsy? If so, can you help me with some instructions cause I'm not managing to get it to work.

Here's the link to the Bootstrap scrollspy I'm trying to implement:

https://getbootstrap.com/docs/4.0/components/scrollspy/

Thanks!

[frodriguezsmartclip]

Have you tried this? https://getbootstrap.com/docs/4.0/components/scrollspy/#via-javascript

[arnonzooz]

Trying it. I'm adding the following to body-end.html in the theme (partial/hooks/body-end.html):

<script>
    $('body').scrollspy({ target: '#TableOfContents' })
</script>

Still doesn't seem to work.

Should I expect an active class to be added to each toc entry? Or should it work out of the box (in which case I'd expect the TOC entry to be highlighted as I scroll)?

Thanks!

[arnonzooz]

Couldn't get the Bootstrap scrollspy to work, but the following code does the job. Add it to body-end.html and don't forget to add some styling to the activeToc class.

<script>
    window.addEventListener("load", (event) => {
        createObserver();
    }, false);

    function createObserver() {
        let observer;

        let options = {
            root: null,
            rootMargin: '5px 5px -50%'
        };

        observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                const id = entry.target.getAttribute('id');
                if (entry.intersectionRatio > 0) {
                    document.querySelector(`nav li a[href="#${id}"]`).classList.add('activeToc');
                } else {
                    document.querySelector(`nav li a[href="#${id}"]`).classList.remove('activeToc');
                }
            });
            
        },options);
            document.querySelectorAll('h2[id], h3[id]').forEach((section) => {
                observer.observe(section);
            });
    }

</script>