Angular Bootstrap scrollspy

Angular Scrollspy - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Angular Bootstrap scrollspy is component which highlight navigation elements depending on the current scroll position and make navigation more intuitive and informative.


Basic example MDB Pro component

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, quod, quae esse soluta quam quaerat quo beatae placeat, fugiat quisquam provident praesentium mollitia doloremque eius quia libero. Similique, facere amet. Dolorem tempore nemo blanditiis perferendis adipisci voluptatem temporibus, dolore ipsa veritatis culpa ducimus nisi similique qui magni eaque, commodi, laboriosam aliquam saepe recusandae sit unde praesentium vitae? Eveniet, eum laudantium. Magni similique porro hic, sed atque nobis eligendi debitis culpa ea provident voluptates accusamus, doloremque, commodi non odit beatae illum. Harum cum, tempora ab officia eum nesciunt dolore voluptatum enim? Nesciunt dolore non, quam dolorem numquam molestiae atque laboriosam dicta ea fugiat, laudantium accusamus maxime consequatur repudiandae? Optio laboriosam quasi praesentium, ratione neque perspiciatis amet alias voluptatem, labore assumenda eos. Repellendus debitis atque magni consectetur? Iusto corrupti praesentium eos, sint consectetur, dolorum eveniet incidunt, quam voluptates ea voluptate doloribus? Libero corporis nemo atque nisi fugiat, numquam repellat officia veniam pariatur!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, quod, quae esse soluta quam quaerat quo beatae placeat, fugiat quisquam provident praesentium mollitia doloremque eius quia libero. Similique, facere amet. Dolorem tempore nemo blanditiis perferendis adipisci voluptatem temporibus, dolore ipsa veritatis culpa ducimus nisi similique qui magni eaque, commodi, laboriosam aliquam saepe recusandae sit unde praesentium vitae? Eveniet, eum laudantium. Magni similique porro hic, sed atque nobis eligendi debitis culpa ea provident voluptates accusamus, doloremque, commodi non odit beatae illum. Harum cum, tempora ab officia eum nesciunt dolore voluptatum enim? Nesciunt dolore non, quam dolorem numquam molestiae atque laboriosam dicta ea fugiat, laudantium accusamus maxime consequatur repudiandae? Optio laboriosam quasi praesentium, ratione neque perspiciatis amet alias voluptatem, labore assumenda eos. Repellendus debitis atque magni consectetur? Iusto corrupti praesentium eos, sint consectetur, dolorum eveniet incidunt, quam voluptates ea voluptate doloribus? Libero corporis nemo atque nisi fugiat, numquam repellat officia veniam pariatur!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, quod, quae esse soluta quam quaerat quo beatae placeat, fugiat quisquam provident praesentium mollitia doloremque eius quia libero. Similique, facere amet. Dolorem tempore nemo blanditiis perferendis adipisci voluptatem temporibus, dolore ipsa veritatis culpa ducimus nisi similique qui magni eaque, commodi, laboriosam aliquam saepe recusandae sit unde praesentium vitae? Eveniet, eum laudantium. Magni similique porro hic, sed atque nobis eligendi debitis culpa ea provident voluptates accusamus, doloremque, commodi non odit beatae illum. Harum cum, tempora ab officia eum nesciunt dolore voluptatum enim? Nesciunt dolore non, quam dolorem numquam molestiae atque laboriosam dicta ea fugiat, laudantium accusamus maxime consequatur repudiandae? Optio laboriosam quasi praesentium, ratione neque perspiciatis amet alias voluptatem, labore assumenda eos. Repellendus debitis atque magni consectetur? Iusto corrupti praesentium eos, sint consectetur, dolorum eveniet incidunt, quam voluptates ea voluptate doloribus? Libero corporis nemo atque nisi fugiat, numquam repellat officia veniam pariatur!


<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark blue">

    <!-- Navbar brand -->
    <mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>

    <!-- Collapsible content -->
    <links>

        <!-- Links -->
        <ul mdbScrollSpy="scrollspy1" class="navbar-nav mr-auto">
            <li class="nav-item">
                <a mdbScrollSpyLink="home" class="nav-link waves-light" mdbWavesEffect>Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a mdbScrollSpyLink="features" class="nav-link waves-light" mdbWavesEffect>Features</a>
            </li>
            <li class="nav-item">
                <a mdbScrollSpyLink="pricing" class="nav-link waves-light" mdbWavesEffect>Pricing</a>
            </li>
        </ul>
        <!-- Links -->

    </links>
    <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

<div class="scrollspy-example z-depth-1 mt-4 px-5">
    <div mdbScrollSpyElement="scrollspy1" id="home">
        <h4 class="mb-4" id="navbar-home">Home</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam ipsam animi debitis maxime explicabo. Deserunt tenetur harum repellendus, architecto, expedita quo eos tempora esse nam fugiat nostrum obcaecati, quisquam officia?
        Quia odit soluta sed excepturi adipisci harum, dolorem ut, facilis commodi iure, voluptas assumenda tenetur. Quae distinctio assumenda aliquid accusamus. Magni, pariatur unde commodi blanditiis voluptate sequi quis dolorem labore?
        Quasi, unde, nihil vel harum totam voluptas laboriosam modi debitis consectetur ad, reprehenderit adipisci provident. Itaque libero quis fugit, quae maxime quibusdam qui adipisci nulla expedita laudantium necessitatibus culpa aut!
        Sunt repellat qui consectetur dolorum ex tempora corrupti distinctio inventore, facere aliquid omnis beatae ipsa eligendi eum magni neque doloremque mollitia incidunt, saepe voluptas! Minima similique enim repellendus. Neque, porro!
        Sed voluptatum aspernatur impedit corrupti. Facere doloremque impedit eveniet illo cum, distinctio optio nostrum quidem, temporibus minima quos necessitatibus eius, corporis repudiandae dolorum quam mollitia aliquid qui. Sunt, voluptate tempora!
        Quasi quam deleniti quos unde molestias illum velit assumenda quia odit quaerat, corporis magnam ipsum culpa alias dolorem, officia eius consequuntur veritatis, esse accusamus. Quia exercitationem maiores suscipit error. Molestias!
        Quae consequuntur maxime natus voluptate quibusdam recusandae. Blanditiis, officiis! Quia, rerum. Aspernatur, ut hic nisi accusamus cupiditate veniam! Ea sint deleniti laboriosam quia numquam culpa, dignissimos tempore consectetur quos asperiores.
        Voluptate, nihil. Exercitationem omnis quasi eaque autem officiis? Molestias rerum ipsum eos aperiam perferendis, quo aliquam voluptates ut eius repudiandae numquam reprehenderit, omnis blanditiis, provident necessitatibus nihil cupiditate! Earum, aperiam!
        Distinctio porro error in dolore nostrum quas ut unde doloremque architecto laboriosam accusamus fuga, consequatur facilis doloribus sint rem vel. Illum, exercitationem? Sit atque est cumque assumenda nesciunt, voluptatum tempore!</p>
    </div>
    <div mdbScrollSpyElement="scrollspy1" id="features">
        <h4 class="mb-4" id="navbar-features">Features</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam ipsam animi debitis maxime explicabo. Deserunt tenetur harum repellendus, architecto, expedita quo eos tempora esse nam fugiat nostrum obcaecati, quisquam officia?
            Quia odit soluta sed excepturi adipisci harum, dolorem ut, facilis commodi iure, voluptas assumenda tenetur. Quae distinctio assumenda aliquid accusamus. Magni, pariatur unde commodi blanditiis voluptate sequi quis dolorem labore?
            Quasi, unde, nihil vel harum totam voluptas laboriosam modi debitis consectetur ad, reprehenderit adipisci provident. Itaque libero quis fugit, quae maxime quibusdam qui adipisci nulla expedita laudantium necessitatibus culpa aut!
            Sunt repellat qui consectetur dolorum ex tempora corrupti distinctio inventore, facere aliquid omnis beatae ipsa eligendi eum magni neque doloremque mollitia incidunt, saepe voluptas! Minima similique enim repellendus. Neque, porro!
            Sed voluptatum aspernatur impedit corrupti. Facere doloremque impedit eveniet illo cum, distinctio optio nostrum quidem, temporibus minima quos necessitatibus eius, corporis repudiandae dolorum quam mollitia aliquid qui. Sunt, voluptate tempora!
            Quasi quam deleniti quos unde molestias illum velit assumenda quia odit quaerat, corporis magnam ipsum culpa alias dolorem, officia eius consequuntur veritatis, esse accusamus. Quia exercitationem maiores suscipit error. Molestias!
            Quae consequuntur maxime natus voluptate quibusdam recusandae. Blanditiis, officiis! Quia, rerum. Aspernatur, ut hic nisi accusamus cupiditate veniam! Ea sint deleniti laboriosam quia numquam culpa, dignissimos tempore consectetur quos asperiores.
            Voluptate, nihil. Exercitationem omnis quasi eaque autem officiis? Molestias rerum ipsum eos aperiam perferendis, quo aliquam voluptates ut eius repudiandae numquam reprehenderit, omnis blanditiis, provident necessitatibus nihil cupiditate! Earum, aperiam!
            Distinctio porro error in dolore nostrum quas ut unde doloremque architecto laboriosam accusamus fuga, consequatur facilis doloribus sint rem vel. Illum, exercitationem? Sit atque est cumque assumenda nesciunt, voluptatum tempore!</p>
    </div>
        <div mdbScrollSpyElement="scrollspy1" id="pricing">
        <h4 class="mb-4" id="navbar-pricing">Pricing</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam ipsam animi debitis maxime explicabo. Deserunt tenetur harum repellendus, architecto, expedita quo eos tempora esse nam fugiat nostrum obcaecati, quisquam officia?
            Quia odit soluta sed excepturi adipisci harum, dolorem ut, facilis commodi iure, voluptas assumenda tenetur. Quae distinctio assumenda aliquid accusamus. Magni, pariatur unde commodi blanditiis voluptate sequi quis dolorem labore?
            Quasi, unde, nihil vel harum totam voluptas laboriosam modi debitis consectetur ad, reprehenderit adipisci provident. Itaque libero quis fugit, quae maxime quibusdam qui adipisci nulla expedita laudantium necessitatibus culpa aut!
            Sunt repellat qui consectetur dolorum ex tempora corrupti distinctio inventore, facere aliquid omnis beatae ipsa eligendi eum magni neque doloremque mollitia incidunt, saepe voluptas! Minima similique enim repellendus. Neque, porro!
            Sed voluptatum aspernatur impedit corrupti. Facere doloremque impedit eveniet illo cum, distinctio optio nostrum quidem, temporibus minima quos necessitatibus eius, corporis repudiandae dolorum quam mollitia aliquid qui. Sunt, voluptate tempora!
            Quasi quam deleniti quos unde molestias illum velit assumenda quia odit quaerat, corporis magnam ipsum culpa alias dolorem, officia eius consequuntur veritatis, esse accusamus. Quia exercitationem maiores suscipit error. Molestias!
            Quae consequuntur maxime natus voluptate quibusdam recusandae. Blanditiis, officiis! Quia, rerum. Aspernatur, ut hic nisi accusamus cupiditate veniam! Ea sint deleniti laboriosam quia numquam culpa, dignissimos tempore consectetur quos asperiores.
            Voluptate, nihil. Exercitationem omnis quasi eaque autem officiis? Molestias rerum ipsum eos aperiam perferendis, quo aliquam voluptates ut eius repudiandae numquam reprehenderit, omnis blanditiis, provident necessitatibus nihil cupiditate! Earum, aperiam!
            Distinctio porro error in dolore nostrum quas ut unde doloremque architecto laboriosam accusamus fuga, consequatur facilis doloribus sint rem vel. Illum, exercitationem? Sit atque est cumque assumenda nesciunt, voluptatum tempore!</p>
    </div>
</div>
            

.navbar .nav-link.active {
    background-color: lightblue;
}
            


Scrollspy in list-group MDB Pro component

Item 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ullam voluptatibus tempore reprehenderit necessitatibus porro aut, dolore praesentium minus exercitationem molestias, nam unde et. Maiores vel reiciendis aliquid laboriosam nemo?

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 4

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor et nemo nesciunt nostrum quisquam eum obcaecati illo nulla sunt magni dolore dolores, porro animi quis tempore ad enim reiciendis doloremque. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi aliquam nobis culpa, fuga recusandae aperiam est expedita sit repudiandae nostrum? Asperiores nostrum eius dolorum eos sit vero, sint possimus modi.


<div class="row">
  <div class="col-4">
      <div mdbScrollSpy="scrollspy3" id="list-example" class="list-group">
          <a mdbScrollSpyLink="list-item-1" class="list-group-item list-group-item-action active" href="#list-item-1">Item 1</a>
          <a mdbScrollSpyLink="list-item-2" class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
          <a mdbScrollSpyLink="list-item-3" class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
          <a mdbScrollSpyLink="list-item-4" class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
      </div>
  </div>
  <div class="col-8">
      <div class="scrollspy-example z-depth-1 px-5">
          <h4 mdbScrollSpyElement="scrollspy3" id="list-item-1">Item 1</h4>
          <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ullam voluptatibus tempore reprehenderit necessitatibus porro aut, dolore praesentium minus exercitationem molestias, nam unde et. Maiores vel reiciendis aliquid laboriosam nemo?</p>
          <h4 mdbScrollSpyElement="scrollspy3" id="list-item-2">Item 2</h4>
          <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
          <h4 mdbScrollSpyElement="scrollspy3" id="list-item-3">Item 3</h4>
          <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
          <h4 mdbScrollSpyElement="scrollspy3" id="list-item-4">Item 4</h4>
          <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor et nemo nesciunt nostrum quisquam eum obcaecati illo nulla sunt magni dolore dolores, porro animi quis tempore ad enim reiciendis doloremque. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi aliquam nobis culpa, fuga recusandae aperiam est expedita sit repudiandae nostrum? Asperiores nostrum eius dolorum eos sit vero, sint possimus modi.</p>
      </div>
  </div>
</div>
            

.scrollspy-example {
    height: 200px;
}
            

MDB Scrollspy MDB Pro component

Section 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis iure exercitationem mollitia fugit asperiores temporibus magnam perspiciatis. Repellat quisquam culpa odit! Dolore non consequuntur dignissimos adipisci tenetur debitis, quisquam culpa. Laborum officiis deserunt, assumenda pariatur vel dolorum provident beatae tenetur nihil quo dicta eius enim cumque reprehenderit voluptate nam aperiam eveniet et iusto at magni. Necessitatibus laborum assumenda consequuntur voluptate. Recusandae mollitia sequi in aperiam enim nesciunt incidunt, cumque ut voluptates ea nam quam beatae maxime voluptatem. Accusamus, animi vel eaque voluptatibus ipsam odio est, minus obcaecati praesentium nam iure!

Section2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis iure exercitationem mollitia fugit asperiores temporibus magnam perspiciatis. Repellat quisquam culpa odit! Dolore non consequuntur dignissimos adipisci tenetur debitis, quisquam culpa. Laborum officiis deserunt, assumenda pariatur vel dolorum provident beatae tenetur nihil quo dicta eius enim cumque reprehenderit voluptate nam aperiam eveniet et iusto at magni. Necessitatibus laborum assumenda consequuntur voluptate. Recusandae mollitia sequi in aperiam enim nesciunt incidunt, cumque ut voluptates ea nam quam beatae maxime voluptatem. Accusamus, animi vel eaque voluptatibus ipsam odio est, minus obcaecati praesentium nam iure!

Subsection 1B

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis iure exercitationem mollitia fugit asperiores temporibus magnam perspiciatis. Repellat quisquam culpa odit! Dolore non consequuntur dignissimos adipisci tenetur debitis, quisquam culpa. Laborum officiis deserunt, assumenda pariatur vel dolorum provident beatae tenetur nihil quo dicta eius enim cumque reprehenderit voluptate nam aperiam eveniet et iusto at magni. Necessitatibus laborum assumenda consequuntur voluptate. Recusandae mollitia sequi in aperiam enim nesciunt incidunt, cumque ut voluptates ea nam quam beatae maxime voluptatem. Accusamus, animi vel eaque voluptatibus ipsam odio est, minus obcaecati praesentium nam iure!

Section 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis iure exercitationem mollitia fugit asperiores temporibus magnam perspiciatis. Repellat quisquam culpa odit! Dolore non consequuntur dignissimos adipisci tenetur debitis, quisquam culpa. Laborum officiis deserunt, assumenda pariatur vel dolorum provident beatae tenetur nihil quo dicta eius enim cumque reprehenderit voluptate nam aperiam eveniet et iusto at magni. Necessitatibus laborum assumenda consequuntur voluptate. Recusandae mollitia sequi in aperiam enim nesciunt incidunt, cumque ut voluptates ea nam quam beatae maxime voluptatem. Accusamus, animi vel eaque voluptatibus ipsam odio est, minus obcaecati praesentium nam iure!


<!--Grid row-->
<div class="row">

  <!--Grid column-->

  <div class="col-md-8">

    <!--Spied element-->
    <div class="scrollspy-example z-depth-1 text-center p-0">

        <section mdbScrollSpyElement="scrollspy4" id="section1" class="p-5 blue lighten-4">
        <h3>Section 1</h3>
        <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis iure exercitationem mollitia fugit asperiores temporibus magnam perspiciatis. Repellat quisquam culpa odit! Dolore non consequuntur dignissimos adipisci tenetur debitis, quisquam culpa.
        Laborum officiis deserunt, assumenda pariatur vel dolorum provident beatae tenetur nihil quo dicta eius enim cumque reprehenderit voluptate nam aperiam eveniet et iusto at magni. Necessitatibus laborum assumenda consequuntur voluptate.
        Recusandae mollitia sequi in aperiam enim nesciunt incidunt, cumque ut voluptates ea nam quam beatae maxime voluptatem. Accusamus, animi vel eaque voluptatibus ipsam odio est, minus obcaecati praesentium nam iure!</p>
        </section>

        <section mdbScrollSpyElement="scrollspy4" id="section2" class="p-5 red lighten-4">
          <h3>Section2</h3>
          <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis iure exercitationem mollitia fugit asperiores temporibus magnam perspiciatis. Repellat quisquam culpa odit! Dolore non consequuntur dignissimos adipisci tenetur debitis, quisquam culpa.
            Laborum officiis deserunt, assumenda pariatur vel dolorum provident beatae tenetur nihil quo dicta eius enim cumque reprehenderit voluptate nam aperiam eveniet et iusto at magni. Necessitatibus laborum assumenda consequuntur voluptate.
            Recusandae mollitia sequi in aperiam enim nesciunt incidunt, cumque ut voluptates ea nam quam beatae maxime voluptatem. Accusamus, animi vel eaque voluptatibus ipsam odio est, minus obcaecati praesentium nam iure!</p>
        </section>

        <section mdbScrollSpyElement="scrollspy4" id="section3" class="p-5 green lighten-4">
          <h3>Subsection 1B</h3>
          <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis iure exercitationem mollitia fugit asperiores temporibus magnam perspiciatis. Repellat quisquam culpa odit! Dolore non consequuntur dignissimos adipisci tenetur debitis, quisquam culpa.
            Laborum officiis deserunt, assumenda pariatur vel dolorum provident beatae tenetur nihil quo dicta eius enim cumque reprehenderit voluptate nam aperiam eveniet et iusto at magni. Necessitatibus laborum assumenda consequuntur voluptate.
            Recusandae mollitia sequi in aperiam enim nesciunt incidunt, cumque ut voluptates ea nam quam beatae maxime voluptatem. Accusamus, animi vel eaque voluptatibus ipsam odio est, minus obcaecati praesentium nam iure!</p>
        </section>

        <section mdbScrollSpyElement="scrollspy4" id="section4" class="p-5 indigo lighten-4">
          <h3>Section 4</h3>
          <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis iure exercitationem mollitia fugit asperiores temporibus magnam perspiciatis. Repellat quisquam culpa odit! Dolore non consequuntur dignissimos adipisci tenetur debitis, quisquam culpa.
            Laborum officiis deserunt, assumenda pariatur vel dolorum provident beatae tenetur nihil quo dicta eius enim cumque reprehenderit voluptate nam aperiam eveniet et iusto at magni. Necessitatibus laborum assumenda consequuntur voluptate.
            Recusandae mollitia sequi in aperiam enim nesciunt incidunt, cumque ut voluptates ea nam quam beatae maxime voluptatem. Accusamus, animi vel eaque voluptatibus ipsam odio est, minus obcaecati praesentium nam iure!</p>
        </section>

    </div>
    <!--/.Spied element-->

  </div>
  <!--Grid column-->


  <!--Grid column-->
  <div class="col-md-3 mb-4">

    <!--Scrollspy-->

    <div class="mdb-scrollspy-ex">

      <!-- Links -->
      <ul mdbScrollSpy="scrollspy4" class="mt-5 nav nav-pills default-pills smooth-scroll">
        <li class="nav-item"><a mdbScrollSpyLink="section1" class="nav-link" href="#section1">Section 1</a></li>
        <li class="nav-item"><a mdbScrollSpyLink="section2" class="nav-link" href="#section2">Section 2</a></li>
        <li class="nav-item"><a mdbScrollSpyLink="section3" class="nav-link" href="#section3">Section 3</a></li>
        <li class="nav-item"><a mdbScrollSpyLink="section4" class="nav-link" href="#section4">Section 4</a></li>
      </ul>
      <!-- Links
 -->

    </div>
    <!--Scrollspy-->

  </div>
  <!--Grid
 column-->

</div>
<!--Grid row-->

            

.mdb-scrollspy-ex .nav-item {
  width: 100%;
}

.mdb-scrollspy-ex a {
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.1rem;
  padding: 0 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  color: black;
}

.mdb-scrollspy-ex-example {
  height: 200px;
}
            

Dotted Scrollspy MDB Pro component

Making the navigation more informative and intuitive is still a challenge to most of the developers.

Thanks to dotted scrollspy, this issue is simply resolved with a use of a sticking elements that indicate on which part of the page your users are and how much longer they can expect the website to be.

Another invaluable option coming with dotted scrollspy is the ability to swiftly switch between desired parts of your webpage with just one click.

Live Demo

<section mdbScrollSpyWindow="scrollspy5" id="section1" class="section primary-color"></section>
<section mdbScrollSpyWindow="scrollspy5" id="section2" class="section default-color"></section>
<section mdbScrollSpyWindow="scrollspy5" id="section3" class="section stylish-color"></section>
<section mdbScrollSpyWindow="scrollspy5" id="section4" class="section secondary-color"></section>
<section mdbScrollSpyWindow="scrollspy5" id="section5" class="section deep-purple"></section>
<section mdbScrollSpyWindow="scrollspy5" id="section6" class="section success-color"></section>

<!-- Scrollspy -->
<div class="dotted-scrollspy">
  <ul mdbScrollSpy="scrollspy5" class="nav d-flex flex-column p-3">
    <li class="nav-item py-2"><a mdbPageScroll mdbScrollSpyLink="section1" class="nav-link" href="#section1"><span></span></a></li>
    <li class="nav-item py-2"><a mdbPageScroll mdbScrollSpyLink="section2" class="nav-link" href="#section2"><span></span></a></li>
    <li class="nav-item py-2"><a mdbPageScroll mdbScrollSpyLink="section3" class="nav-link" href="#section3"><span></span></a></li>
    <li class="nav-item py-2"><a mdbPageScroll mdbScrollSpyLink="section4" class="nav-link" href="#section4"><span></span></a></li>
    <li class="nav-item py-2"><a mdbPageScroll mdbScrollSpyLink="section5" class="nav-link" href="#section5"><span></span></a></li>
    <li class="nav-item py-2"><a mdbPageScroll mdbScrollSpyLink="section6" class="nav-link" href="#section6"><span></span></a></li>
  </ul>
</div>
            

.section {
    height: 100vh;
}

            

Two column Scrollspy MDB Pro component

Two column window scrollspy. First column for content and the second one for links.


        <div class="container-fluid">
          <div class="row">
            <div class="col-md-10 mx-auto">
              <section mdbScrollSpyWindow="scrollspy5" id="section1" class="section primary-color"></section>
              <section mdbScrollSpyWindow="scrollspy5" id="section2" class="section default-color"></section>
              <section mdbScrollSpyWindow="scrollspy5" id="section3" class="section stylish-color"></section>
              <section mdbScrollSpyWindow="scrollspy5" id="section4" class="section secondary-color"></section>
              <section mdbScrollSpyWindow="scrollspy5" id="section5" class="section deep-purple"></section>
              <section mdbScrollSpyWindow="scrollspy5" id="section6" class="section success-color"></section>
            </div>
            <div class="col-md-2 d-none d-md-block">
              <div class="mdb-scrollspy">
                <ul mdbScrollSpy="scrollspy5" class="nav d-flex flex-column p-3">
                  <li class="nav-item py-2"><a mdbScrollSpyLink="section1" class="nav-link" href="#section1">Section 1</a></li>
                  <li class="nav-item py-2"><a mdbScrollSpyLink="section2" class="nav-link" href="#section2">Section 2</a></li>
                  <li class="nav-item py-2"><a mdbScrollSpyLink="section3" class="nav-link" href="#section3">Section 3</a></li>
                  <li class="nav-item py-2"><a mdbScrollSpyLink="section4" class="nav-link" href="#section4">Section 4</a></li>
                  <li class="nav-item py-2"><a mdbScrollSpyLink="section5" class="nav-link" href="#section5">Section 5</a></li>
                  <li class="nav-item py-2"><a mdbScrollSpyLink="section6" class="nav-link" href="#section6">Section 6</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

      

        .section {
          height: 100vh;
        }
        .mdb-scrollspy {
          display: block;
          position: fixed;
          top: 0 !important;
          right: 0;
          li {
            display: block;
            padding: 1rem 1rem;
            &:first-child {
              padding-top: 0.5rem;
          }
            &:last-child {
             padding-bottom: 0.5rem;
            }
          a {
            &.active {
              font-weight: bold;
              }
            }
          }
        }
      

Angular Scrollspy - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of scrollspy component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// For MDB Angular Pro
import { ScrollSpyModule, WavesModule } from 'ng-uikit-pro-standard'

Directives

MdbScrollSpy

Selector: mdbScrollSpy

Type: ScrollSpyDirective

MdbScrollSpyLink

Selector: mdbScrollSpyLink

Type: ScrollSpyLinkDirective

MdbScrollSpyWindow

Selector: mdbScrollSpyWindow

Type: ScrollSpyWindowDirective

MdbScrollSpyElement

Selector: mdbScrollSpyElement

Type: ScrollSpyElementDirective


Inputs

MdbScrollSpy
Name Type Default Description Example
mdbScrollSpy string - Specifies unique id for scrollspy mdbScrollSpy="example-scrollspy"
MdbScrollSpyLink
Name Type Default Description Example
mdbScrollSpyLink string - Specifies unique id which should match id attribute of corresponding section mdbScrollSpyLink="section-1"
MdbScrollSpyWindow
Name Type Default Description Example
mdbScrollSpyWindow string - Specifies unique id which should match id of corresponding mdbScrollSpy element mdbScrollSpyWindow="example-scrollspy"
offset number 0 Pixels to offset from the top when calculating the position of scroll [offset]="300"
MdbScrollSpyElement
Name Type Default Description Example
mdbScrollSpyElement string - Specifies unique id which should match id of corresponding mdbScrollSpy element mdbScrollSpyElement="example-scrollspy"
offset number 0 Pixels to offset from the top when calculating the position of scroll [offset]="300"

Outputs

MdbScrollSpy
Name Type Description Example
activeLinkChange EventEmitter<ScrollSpyLinkDirective> Event fired when active link change (activeLinkChange)="onActiveLinkChange($event)"