由<a href="#id"> is covered by position:fixed element

Question

I guess the main reason why I'm asking is because I don't really know what exatcly to search for - so sorry if this questions got asked already a thousand times.

Here's a JSFiddle引用的文字。我在页面顶部有一个很大的绿色栏，它是固定的。当我使用其中一个指向同一页面ID的链接时，浏览器会向下滚动到它们。不幸的是，绿色栏覆盖了我们刚刚滚动的大部分文本。我有什么选择教导浏览器比正常情况下向下滚动6rem？

HTML：

<div id="bar"></div>
<nav>
  <a href="#c1">First text</a>
  <a href="#c2"> Second text</a>
</nav>
<div id="c1">
  <h1> First </h1> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </div>
<div id="c2">
  <h1>Second</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in repreenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSS：

body {
  padding-top: 6.5rem;
}

#bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6rem;
}