Sticky Content

Hi @Damian

I'm using your sticky content.Where I'm facing some issue

Expected behavior

The sticky must stop before footer Actual behavior

Bus the sticky is over the footer

Resources (screenshots, code snippets etc.)

<div class="container-fluid ">

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark cyan sticky-top" [containerInside]="false">
  <mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>
  <links>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link waves-light" mdbWavesEffect>
          <mdb-icon fas icon="envelope"></mdb-icon> Contact<span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>
          <mdb-icon fas icon="cog"></mdb-icon> Settings
        </a>
      </li>
      <li class="nav-item dropdown" dropdown>
        <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
          <mdb-icon fas icon="user"></mdb-icon> Profile<span class="caret"></span>
        </a>
        <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">My account</a>
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Log out</a>
        </div>
      </li>
    </ul>
  </links>
</mdb-navbar>
<div id="header" mdbSticky>
</div>
<div id="main" class="row ">
  <div class="col-4 d-none d-lg-block">
    <div class="widget stickyCustomlt " mdbSticky stickyAfter="#header">
      <mdb-accordion [multiple]="false">
        <mdb-accordion-item [collapsed]="false">
          <mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
          <mdb-accordion-item-body>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
            moon officia aute,
            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
            tempor, sunt
            aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
            helvetica, craft
            beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
            Leggings occaecat
            craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
            accusamus labore sustainable
            VHS.
          </mdb-accordion-item-body>
        </mdb-accordion-item>
        <mdb-accordion-item>
          <mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head>
          <mdb-accordion-item-body>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
            moon officia aute,
            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
            tempor, sunt
            aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
            helvetica, craft
            beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
            Leggings occaecat
            craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
            accusamus labore sustainable
            VHS.
          </mdb-accordion-item-body>
        </mdb-accordion-item>
    </div>
  </div>
  <div id="centerContent" class="col-12 col-lg-8 ">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum lacus sed velit luctus tempus. Ut
      bibendum gravida rutrum. Phasellus et ipsum id ante interdum laoreet. Vivamus pharetra tortor sed libero
      interdum at volutpat arcu cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
      cubilia Curae; Maecenas porta tempor ullamcorper. Curabitur quis elit nisl. In tincidunt, purus eget commodo
      pretium, libero mauris egestas sem, in vestibulum sem lacus ac odio. Donec pharetra tristique nulla, non
      scelerisque mauris auctor in. Sed elit mauris, pellentesque sed iaculis id, condimentum eget sem. Maecenas at
      enim mi. Duis non nunc justo, vitae tristique purus. Quisque sagittis convallis elementum.</p>
    <p>Donec sed lectus tellus. Cras felis leo, imperdiet a interdum in, vestibulum eu quam. Donec elit est,
      interdum eget mattis quis, semper ac est. Nam dignissim ultrices risus, a ornare justo pretium vitae. Quisque
      vitae pellentesque mauris. Cras consectetur laoreet adipiscing. Morbi placerat, elit et dapibus vestibulum,
      ipsum diam pellentesque metus, eu tincidunt tellus elit in quam. Mauris quis accumsan urna. Proin commodo
      sapien volutpat lectus ultricies varius. Duis elit enim, dapibus nec convallis id, egestas non neque. Sed a
      libero eu dolor ultrices ultricies a sit amet nulla.</p>
    <p>In hac habitasse platea dictumst. Nulla a velit dolor. Vestibulum in purus libero. Donec et orci libero.
      Proin eget lacinia nisi. Proin eget pretium nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Suspendisse purus diam, adipiscing quis ultrices in, fringilla non neque. Integer et lectus lectus, vel congue
      massa. Duis tincidunt ipsum non quam bibendum et lacinia purus viverra. Etiam tortor est, volutpat vel
      ultricies a, aliquet et augue. Vivamus sed nulla enim, vel egestas tortor.</p>

    <p>Suspendisse pulvinar urna non libero viverra viverra. Pellentesque commodo sagittis mattis. Pellentesque
      habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla consequat nunc semper
      enim sodales accumsan aliquam justo luctus. Pellentesque quis leo at mauris malesuada malesuada. Integer vel
      metus lectus. Duis lobortis, massa ac viverra dignissim, ipsum magna auctor ante, et venenatis massa justo
      eget velit. Pellentesque vel leo ipsum, rhoncus adipiscing lacus. Donec neque lacus, tempus id pulvinar et,
      fermentum vitae lectus. Pellentesque aliquam velit sit amet libero ornare eu facilisis sem tristique. Nunc
      faucibus congue lorem, non ultricies ligula faucibus non. Duis vehicula, est sit amet congue convallis, leo
      lorem posuere eros, a feugiat felis nisl non turpis.</p>
    <p>Donec arcu lectus, ullamcorper ut blandit sit amet, consequat eu quam. Fusce augue augue, blandit non ornare
      nec, auctor in purus. Quisque nec turpis arcu. Phasellus hendrerit massa quis erat pulvinar dapibus. Maecenas
      at elit et nulla tempor varius. Aenean consectetur elit ac ligula dignissim aliquam. Praesent adipiscing metus
      bibendum libero malesuada porta. Suspendisse potenti. Cras molestie mauris id orci lobortis congue. Phasellus
      accumsan placerat euismod. Vivamus non viverra dolor. Ut tempus gravida elit, sed vehicula velit porttitor sit
      amet.</p>
  </div>
</div>
<div class="pt-5 ">
  <footer class="page-footer font-small unique-color-dark" id="footer">
    <div style="background-color: #6351ce;">
      <div class="container">
        <div class="row py-4 d-flex align-items-center">
          <div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
            <h6 class="mb-0">Get connected with us on social networks!</h6>
          </div>
          <div class="col-md-6 col-lg-7 text-center text-md-right">
            <a class="fb-ic">
              <mdb-icon fab icon="facebook" class="white-text mr-4"></mdb-icon>
            </a>
            <a class="tw-ic">
              <mdb-icon fab icon="twitter" class="white-text mr-4"></mdb-icon>
            </a>
            <a class="gplus-ic">
              <mdb-icon fab fab icon="google-plus" class="white-text mr-4"></mdb-icon>
            </a>
            <a class="li-ic">
              <mdb-icon fab icon="linkedin" class="white-text mr-4"></mdb-icon>
            </a>
            <a class="ins-ic">
              <mdb-icon fab icon="instagram" class="white-text mr-4"></mdb-icon>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="container text-center text-md-left mt-5">
      <div class="row mt-3">
        <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
          <h6 class="text-uppercase font-weight-bold">Company name</h6>
          <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
          <p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet,
            consectetur adipisicing
            elit.
          </p>
        </div>
        <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
          <h6 class="text-uppercase font-weight-bold">Products</h6>
          <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
          <p>
            <a href="#!">MDBootstrap</a>
          </p>
          <p>
            <a href="#!">MDWordPress</a>
          </p>
          <p>
            <a href="#!">BrandFlow</a>
          </p>
          <p>
            <a href="#!">Bootstrap Angular</a>
          </p>
        </div>
        <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
          <h6 class="text-uppercase font-weight-bold">Useful links</h6>
          <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
          <p>
            <a href="#!">Your Account</a>
          </p>
          <p>
            <a href="#!">Become an Affiliate</a>
          </p>
          <p>
            <a href="#!">Shipping Rates</a>
          </p>
          <p>
            <a href="#!">Help</a>
          </p>
        </div>
        <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
          <h6 class="text-uppercase font-weight-bold">Contact</h6>
          <hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
          <p>
            <mdb-icon fas icon="home" class="mr-3"></mdb-icon> New York, NY 10012, US
          </p>
          <p>
            <mdb-icon fas icon="envelope" class="mr-3"></mdb-icon> info@example.com
          </p>
          <p>
            <mdb-icon fas icon="phone" class="mr-3"></mdb-icon> + 01 234 567 88
          </p>
          <p>
            <mdb-icon fas icon="print" class="mr-3"></mdb-icon> + 01 234 567 88
          </p>
        </div>
      </div>
    </div>
    <div class="footer-copyright text-center py-3">© 2018 Copyright:
      <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
    </div>
  </footer>
</div>

I want to stop the sticky before footer so is there any class or something like the one you have for

mdbSticky stickyAfter="#header"

like this want for footer is there anything available or how to stop that

mdbSticky stickyBefore="#footer"