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.

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

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.

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 3

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.

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.

Subsection A

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.

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.

Subsection B

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.

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 4

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.

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.


          <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


        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.

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

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