Scrollspy Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
Enable Component
Enable the scrollspy component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                scrollspy: true // Enable scrollspy component
            }
        }
    }
}
Basic Usage
Explore more examples from the previewer tab
<div id="list-example" class="list-group">
    <a class="list-group-item list-group-item-action active" href="#list-item-1">
      <div class="list-item-main-content">
        Item 1
      </div>
    </a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="h-256px overflow-auto position-relative" tabindex="0">
    <h4 id="list-item-1">Item 1</h4>
    <p>Content ...</p>
</div>

{title}