Angular Scrollspy - Bootstrap 4 & Material Design

<!--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>
            

                <div class="row">
  <div class="col-sm-4 col-lg-3">
      <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column mt-4">
          <a class="navbar-brand" href="#">Navbar</a>
          <nav mdbScrollSpy="scrollspy2" class="nav nav-pills flex-column">
              <a mdbScrollSpyLink="item-1" class="nav-link my-1" href="#item-1">Item 1</a>
              <a mdbScrollSpyLink="item-2" class="nav-link my-1" href="#item-2">Item2</a>
              <a mdbScrollSpyLink="item-3" class="nav-link my-1" href="#item-3">Item3</a>
              <a mdbScrollSpyLink="item-4" class="nav-link my-1" href="#item-4">Item4</a>
          </nav>
      </nav>
  </div>

  <div class="col-sm-8 col-lg-9">
    <div class="scrollspy-example z-depth-1 mt-4 px-4">
          <h5 mdbScrollSpyElement="scrollspy2" class="py-2" id="item-1">Item 1</h5>
          <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi quod minus velit eaque dolorum saepe accusamus consectetur blanditiis soluta doloremque laudantium, maxime eveniet aut impedit harum odio nostrum cumque culpa! Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe ex velit quod tenetur ipsum amet nihil error impedit accusamus, architecto exercitationem vitae natus. At sit, animi aliquid nisi maiores impedit!</p>
          <h5 mdbScrollSpyElement="scrollspy2" class="py-2" id="item-2">Item 2</h5>
          <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum facilis quis perspiciatis odio eius eum itaque quia, voluptatem esse expedita numquam. Alias perferendis error tempora qui id in, earum ex. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit vero aliquam impedit nam, ipsa quos, adipisci quisquam labore harum atque, a tempora excepturi illo aut veritatis reprehenderit molestias rerum quae.</p>
          <h5 mdbScrollSpyElement="scrollspy2" class="py-2" id="item-3">Item 3</h5>
          <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium iste iure quod. Eligendi reprehenderit amet doloremque tempora sit, pariatur, atque expedita veniam unde dolor cumque. Repellat quam accusantium ex possimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nihil, sed et deleniti delectus illum tempora eveniet suscipit quidem incidunt dolorum consequuntur maiores expedita similique voluptate minima quam quos ut.</p>
          <h5 mdbScrollSpyElement="scrollspy2" class="py-2" id="item-4">Item 4</h5>
          <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque deserunt odit molestiae odio. Rerum fugit placeat veniam esse fugiat ea dolorem? Porro sequi tenetur facere hic quaerat delectus quidem aliquam! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, adipisci alias. Ex ab aliquid laudantium vel optio eius voluptas consequuntur unde ut odit! Id nemo est amet facere consequatur dolor!</p>
      </div>
  </div>
</div>
            

<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>
            

<!--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-->

            

<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>
            

        <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>