title: Navbar sticky top not working when inside an angular app
body: <p>Im building a web application with a sticky navbar on top. The navbar is in such a way that there exists a brand logo above the navbar. So when the page loads initially, the user sees a brand logo, below that is the navbar. When a user scrolls, the logo div moves up (out of the viewport) and only the navbar should stick at the top. I was able to achieve this with the code below : </p>
  
  <pre><code>
  &lt;!-- Content Within Body --&gt;
  
  &lt;!-- Brand Logo --&gt;
  &lt;div class="container-fluid"&gt;
      &lt;a class="navbar-brand" href="#"&gt;
          &lt;img src="" width="150" height="30" class="d-inline-block align-top" alt="" style="margin: 20px;margin-left:0px;"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- Navbar --&gt;
  &lt;nav class="navbar navbar-default navbar-fixed-top navbar card-bordered sticky-top navbar-expand-lg navbar-light pb-0 pt-0"&gt;
  
      ....
      ....
  
  &lt;/nav&gt;
  
  </code></pre>
  
  <p>When the same thing above is put into an angular component, the navbar is not sticky anymore. I looked into it and found that angular adds a tag before and after the html so the new structure would be:</p>
  
  <pre><code>&lt;!-- Notice the newly added tag --&gt;
  &lt;app-navbar&gt;
  
      &lt;!-- Brand Logo --&gt;
      &lt;div class="container-fluid"&gt;
          &lt;a class="navbar-brand" href="#"&gt;
              &lt;img src="" width="150" height="30" class="d-inline-block align-top" alt="" style="margin: 20px;margin-left:0px;"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Navbar --&gt;
      &lt;nav class="navbar navbar-default navbar-fixed-top navbar card-bordered sticky-top navbar-expand-lg navbar-light bg-alt-lvl2 pb-0 pt-0"&gt;
  
          ....
          ....
  
      &lt;/nav&gt;
  &lt;/app-navbar&gt;
  </code></pre>
  
  <p>And this prevents the navbar from being sticky. When I used chrome console and moved the navbar outside the app-navbar tag, it behaves correctly i.e it now is sticky. Is there something I'm missing ?</p>