title: How to float side nav along the page
body: <p>I want the side navigation to be floated left along whenever I go down the page. I was trying to implement it using sticky property. But it was not working.
  See the code for your reference</p>
  <pre><code>.sticky-class {
    position: sticky;
    top: 30px;
  }
  </code></pre>
  <p>My html snapshot is</p>
  <pre><code>&lt;div class=&quot;side-nav&quot; fxFlex=&quot;80&quot; fxLayout=&quot;row&quot; fxLayoutGap=&quot;1px&quot;&gt;
      &lt;div fxFlex=&quot;15&quot;&gt;
        &lt;div class=&quot;sticky-class&quot;&gt;
          &lt;app-sidenav&gt;&lt;/app-sidenav&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  <p><code>app-sidenav</code> component is using angular material to display the content. I want it to be floated when I scroll.</p>
  <p>Is there anyway to achieve this?</p>