title: How to fix some divs on top while scrolling using bootstrap?
body: <p>I am using bootstrap in Angular 2 project and I want to freeze couple of divs(with ids as filters and categories in the code) on top always, while user scrolls down the page.</p>
  
  <p>This is the code that I have in <a href="https://jsfiddle.net/ugufn63z/4/" rel="nofollow noreferrer">jsfiddle here</a></p>
  
  <p>Code Snippet: </p>
  
  <pre><code>    &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
  
          &lt;/div&gt;
          &lt;div id="navbar" class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
  
                  &lt;li routerLinkActive="active"&gt;&lt;a routerLink="/overview"&gt;Overview&lt;/a&gt;&lt;/li&gt;
                  &lt;li routerLinkActive="active"&gt;&lt;a routerLink="/insights"&gt;Insights&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
  
  
  
  
  
          &lt;/div&gt;
          &lt;!--/.nav-collapse --&gt;
  
  
      &lt;/div&gt;
  &lt;/nav&gt;
  
  
  &lt;div id="filters" class="container-fluid" style="margin-top: 60px" &gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-md-2 col-sm-4"&gt;
          &lt;button&gt;Filter 1&lt;/button&gt;
        &lt;/div&gt;
         &lt;div class="col-md-2 col-sm-4"&gt;
         &lt;button&gt;Filter 2&lt;/button&gt;
         &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="categories" class="container-fluid"  &gt;
      &lt;div class="row"&gt;
           &lt;ul class="nav navbar-nav"&gt;
  
                  &lt;li&gt;&lt;a routerLink="#"&gt;Sub Category 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a routerLink="#"&gt;Sub Category 2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
  
          &lt;div class="col-md-6 col-sm-12 col-xs-12"&gt;
              &lt;div style="background: blue; height: 800px;"&gt;
                Trend Chart
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6 col-sm-12 col-xs-12"&gt;
              &lt;div style="background: green; height: 800px;"&gt;
                Bar Chart
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried using bootstrap's 'affix', but it is breaking the scroll and the margins of 'filters' and 'categories' divs, as can be seen <a href="https://jsfiddle.net/ugufn63z/5/" rel="nofollow noreferrer">here</a></p>
  
  <p>Kindly let me know if I am missing anything else that needs to be added for affix to work.</p>