Scrollspy

Angular Bootstrap 5 Scrollspy component

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

Note: Read the API tab to find all available options and advanced customization

Basic example

Section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.

Section 2

Section 3 Subsection A

Subsection B

Section 4

Show code

HTML
CSS

        
            
            <div class="row">
              <div class="col-md-8">
                <div class="scrollspy-example scrollspy-container">
                  <section mdbScrollspyElement="scrollspy" id="example-1">
                    <h3>Section 1</h3>
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel
                      minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo
                      necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.
                    </p>
                  </section>
                  <section mdbScrollspyElement="scrollspy" id="example-2">
                    <h3>Section 2</h3>
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel
                      minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo
                      necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.
                    </p>
                  </section>
                  <section mdbScrollspyElement="scrollspy" id="example-3">
                    <h3>Section 3</h3>
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel
                      minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo
                      necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.
                    </p>
                    <section mdbScrollspyElement="scrollspy-2" id="example-5">
                      <h3>Subsection A</h3>
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus
                        vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo
                        necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.
                      </p>
                    </section>
                    <section mdbScrollspyElement="scrollspy-2" id="example-6">
                      <h3>Subsection B</h3>
                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus
                        vel minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo
                        necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.
                      </p>
                    </section>
                  </section>
                  <section mdbScrollspyElement="scrollspy" id="example-4">
                    <h3>Section 4</h3>
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore earum natus vel
                      minima quod error maxime, molestias ut. Fuga dignissimos nisi nemo
                      necessitatibus quisquam obcaecati et reiciendis quaerat accusamus numquam.
                    </p>
                  </section>
                </div>
              </div>

              <div class="col-md-4">
                <div id="scrollspy" class="sticky-top">
                  <ul mdbScrollspy="scrollspy" class="nav flex-column nav-pills menu-sidebar">
                    <li class="nav-item">
                      <a mdbScrollspyLink="example-1" class="nav-link">Section 1</a>
                    </li>
                    <li class="nav-item">
                      <a mdbScrollspyLink="example-2" class="nav-link">Section 2</a>
                    </li>
                    <li class="nav-item">
                      <a mdbScrollspyLink="example-3" class="nav-link">Section 3</a>
                      <ul mdbScrollspy="scrollspy-2" class="nav flex-column ps-3">
                        <li class="nav-item">
                          <a mdbScrollspyLink="example-5" class="nav-link">Subsection A</a>
                        </li>
                        <li class="nav-item">
                          <a mdbScrollspyLink="example-6" class="nav-link">Subsection B</a>
                        </li>
                      </ul>
                    </li>
                    <li class="nav-item">
                      <a mdbScrollspyLink="example-4" class="nav-link">Section 4</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

        
            
            .scrollspy-example {
              position: relative;
              height: 200px;
              overflow: auto;
            }

Scrollspy - API

Import

Show code

app.module.ts

        
            
          import { MdbScrollspyModule } from 'mdb-angular-ui-kit/scrollspy';
          …
          @NgModule ({
            ...
            imports: [MdbScrollspyModule],
            ...
          })

Inputs

MdbScrollspyElement / MdbScrollspyWindow

Name	Type	Default	Description
`offset`	number	`10`	Pixels to offset from top when calculating position of scroll.

MdbScrollspyLink

Name	Type	Default	Description
`scrollIntoView`	boolean	`false`	Scroll to the section assigned to a given link.

Outputs

MdbScrollspyDirective

Event type	Description
`activeLinkChange`	This event fires on the scroll element whenever a new item becomes activated by the scrollspy.

Show code

HTML
TypeScript

        
            
              <ul mdbScrollspy="scrollspy" (activeLinkChange)="onActiveLinkChange($event)" class="nav flex-column nav-pills menu-sidebar">
                ...
              </ul>

        
            
            onActiveLinkChange(link): void {
              console.log('active link', link);
            }