right sidebar toc collapse while scrolling

[stijnvanhoey]

As in the documentation website of the previous bootstrap version 3, collapse by default and show lower titles while in certain section, e.g. https://getbootstrap.com/docs/3.4/getting-started/

[stijnvanhoey]

basic layout to test:

• extends the active class to the parents of the active a tags of the navbar (template):

<script>
    $(document).ready(function() {
        $('a[href="' + this.location.pathname + '"]')..parents('li,ul').addClass('active');
    });
</script>  

• add custom class (e.g. toc-section) to the ul sub-elements in the navbar (template)
• for this class, put display: none by default and as block when active:

ul.toc-section.active {
    display: block;
}

[jorisvandenbossche]

Bootstrap does this by adding a collapse class to the surrounding div. For that to work, I think we need to divide the list in two parts: main list with level-1 items, and then nested lists with the rest of the levels for each item of the first list (this is what they do with their 4.3 docs for the left sidebar). And then you can let the non-active nested lists be hidden.

That only fully hides or shows after level 1, and not more gradually if a page has more levels of headings. So for that the custom javascript approach above you show might be easier / better.