title: Affixed top navbar covers anchor's content
body: <p>It's a landing page with fixed navbar and anchors in a content using bootstrap scrollspy and affix. I have added affix on my top navbar via data attributes. Everything is working well, except that affixed top navbar covers top of the content.</p>
  
  <p><strong>This is how it is at this moment:</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/ffvVb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ffvVb.jpg" alt="enter image description here"></a></p>
  
  <p><strong>And this is how it should be:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/jtPTZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jtPTZ.jpg" alt="enter image description here"></a></p>
  
  <p>navbar code:</p>
  
  <pre><code>&lt;!-- navbar section --&gt;
  
  &lt;nav id="navbar-scrollspy" class="navbar navbar-default" data-spy="affix" data-offset-top="58" data-offset-bottom="200"&gt;
      &lt;div class="container"&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"&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;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div id="navbar" class="collapse navbar-collapse" aria-expanded="false" style="height: 1px;"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active"&gt;&lt;a href="#first_round"&gt;&lt;strong&gt;ГЛАВНАЯ&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#second_round"&gt;КАК ЭТО &lt;strong&gt;РАБОТАЕТ&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#third_round"&gt;КАК ПОЛУЧИТЬ &lt;strong&gt;ЗАЙМ&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#fourth_round"&gt;КАК ВЕРНУТЬ &lt;strong&gt;ЗАЙМ&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#fifth_round"&gt;ОТЗЫВЫ &lt;strong&gt;О НАС&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here's live example: <a href="http://zaim.wvb.io/" rel="nofollow noreferrer">http://zaim.wvb.io/</a></p>