StickyContent Weird Behaviour

Could you provide some html and ts code on which I will be able to reproduce this problem?

<div mdbSticky class="floatingDiv" #floatingDiv>
    Floating Div Content
</div>

<mdb-navbar #nav SideClass="navbar navbar-toggleable-md navbar-expand-lg double-nav fixed-top" [containerInside]="false">
    Navbar content

I'm suspecting the "StickyContent" for FloatingDiv is not working because my navbar has also enabled "Fixed-top". Please note that this two code snippet are from different TS. I have separated the header code and main body code into two different TS.

FYI, I also tested the Example Sticky Content code with "fixed-top" nav bar using the code snippet from https://mdbootstrap.com/docs/angular/advanced/sticky/, the result is the same as mentioned above.

Is it full html code of element with mdbSticky? Please try to use 'sticky-after' option as explained in documentation. For example:

<div mdbSticky sticky-after="#yourHeaderElement">

I've included sticky-after="#yourHeaderElement", but is still not working. Does sticky-after="#yourHeaderElement" work if they are not within the same html/TS file?

@Arkadiusz Idzikowski any solution for this issue?

Dear Junior,

We have to investigate this problem, but it may take a while until we'll find some fix for this situation.

Until now, as a workaround, please add the margin-top style of value which mdb-navbar height is to every element which needs to be sticky.

So if your navbar is 56px height, add the margin-top: 56px to every element which is sticky.

Best Regards,

Damian

noted, anyway to add margin-top: 56px only when the sticky is activated and while scrolling?

Dear junior5417,

I have investigated this problem, and it seems that the stickyAfter resolves your problem.

I've got a separated NavbarComponent which contains the navbar with .fixed-top class, and in AppComponent I have used this NavbarComponent before the code of a sticky content layout.

In the stickyAfter input I have passed a .fixed-top class, which is a selector for navbar (from now, the sticky elements have offset of height from navbar element).

The only thing which I need to add is a style which sets an initial offset for the first sticky element(position: fixed; top: 56px).

Please take a look at the below code:

NavbarComponent:

<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top indigo">

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

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

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

      <!-- Dropdown -->
      <li class="nav-item dropdown" dropdown>
        <a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
          Basic dropdown<span class="caret"></span></a>
        <div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a>
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a>
          <div class="divider dropdown-divider"></div>
          <a class="dropdown-item waves-light" mdbWavesEffect href="#">Separated link</a>
        </div>
      </li>

    </ul>
    <!-- Links -->

    <!-- Search form -->
    <form class="form-inline waves-light" mdbWavesEffect>
      <div class="md-form my-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search">
      </div>
    </form>
  </links>
  <!-- Collapsible content -->

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

AppComponent:

<app-navbar></app-navbar>

<div class="container">
  <div id="wrapper">
    <div id="header" class="color z-depth-1" mdbSticky stickyAfter=".fixed-top">
      <h2 class="h1" id="topH">Sticky Content demo</h2>
      <h4>Scroll down to see the effect</h4>
    </div>
    <div id="main" class="row">
      <div id="sidebar-lt" class="sidebar">
        <div class="widget static">
          <h2>Static Widget</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
        </div>
        <div class="widget color z-depth-1" mdbSticky stickyAfter=".fixed-top">
          <h2>Sticky Widget</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
        </div>
        <div class="widget static">
          <h2>Static Widget</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
        </div>
      </div>
      <div id="article">
        <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>Cras eu ipsum ac erat convallis gravida. Donec porta consequat odio, id pharetra augue volutpat vitae. Etiam ut volutpat dui. Vestibulum eu risus leo. Ut quis nisl in magna gravida feugiat in vel libero. Donec felis nunc, fermentum quis luctus elementum, vulputate quis turpis. Vestibulum erat arcu, feugiat eu eleifend et, pretium et enim. Integer dignissim nunc ac velit pharetra quis laoreet ipsum varius. Praesent dictum, elit tempus aliquam vulputate, lorem est euismod neque, sit amet vulputate nisl turpis at magna. Maecenas felis ipsum, adipiscing ut mollis ut, feugiat vel nunc. Morbi blandit, enim a faucibus cursus, mi nunc rutrum turpis, a dictum diam justo eget ipsum. Vestibulum facilisis dolor sed elit faucibus nec ornare eros bibendum. Etiam enim odio, ultricies vitae imperdiet vel, aliquam id ante. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae fringilla sapien.</p>
        <p>Sed consectetur ornare nisi eu lobortis. Curabitur nunc purus, vulputate vel blandit nec, dignissim pharetra tortor. Nulla sagittis condimentum semper. Maecenas auctor hendrerit enim, quis ultrices justo venenatis sagittis. Aliquam erat volutpat. In hac habitasse platea dictumst. Sed sed ipsum lorem, eu tincidunt lacus. Suspendisse porttitor, elit sit amet placerat vestibulum, urna urna convallis odio, nec accumsan urna nulla sit amet orci.</p>
        <p>Sed in massa diam, et luctus neque. Morbi viverra turpis ut quam faucibus mattis quis sit amet lorem. Vestibulum porta tellus at sem rhoncus pharetra. Aenean quis erat eu sem convallis scelerisque cursus at lectus. Morbi ipsum turpis, consectetur et scelerisque quis, molestie sit amet sem. Etiam mollis, quam pellentesque sagittis egestas, justo nibh gravida lacus, ac rhoncus leo neque sed leo. Nunc consequat lacinia lorem, et blandit justo tempus non. Morbi quam turpis, sodales non porttitor nec, fermentum vel risus. Praesent quam lacus, hendrerit a consectetur a, viverra vitae enim. Morbi varius pulvinar mi, ut sodales eros mattis viverra. Nam condimentum, ante nec varius posuere, turpis orci gravida nulla, eget cursus tellus libero sed risus.</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 id="sidebar-rt" class="sidebar">
        <div class="widget static">
          <h2>Static Widget</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
        </div>
        <div class="widget color z-depth-1" mdbSticky stickyAfter=".fixed-top">
          <h2>Sticky Widget</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
        </div>
        <div class="widget static">
          <h2>Static Widget</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam interdum luctus eros sed pretium. Proin turpis odio, viverra et tincidunt nec, tincidunt sed nisl.</p>
        </div>
      </div>
    </div>
    <div id="footer">
      <h2>Stop Point</h2>
    </div>
  </div>

Scss:

#wrapper {
  width:960px;
  height: 400px;
  margin:0 auto;
  #header {
    border-bottom:1px solid #ccc;
    padding:10px 20px;
    width:920px;
    z-index: 3;
    position: fixed;
    top: 56px;
  }
  #main {
    overflow:hidden;
    .sidebar {
      float:left;
      width:200px;
      padding:0;
    }
    .sidebar .widget {
      width:200px;
      padding:10px 15px;
      border-bottom:1px solid #ccc;
    }
    #article {
      width:458px;
      padding:0 20px;
      border-left:1px solid #ccc;
      border-right:1px solid #ccc;
      float:left;
    }
    #sidebar-lt{
      margin: 0 30px;
    }
  }
  #footer{
    height: 700px;
    color: white;
    text-align: center;
    padding: 10px;
    background-color: red;
  }
  .color {
    background-color: blue;
    color: white;
  }
}

h1 { margin:0; }
h2 { margin:0 0 0.5em; }

Best Regards

Damian