css position:fixed 问题

Question

这里是全部的代码。

因为使用了postion:fixed的设置，使得导航栏固定在窗口，效果如下：

因为导航栏占据了80px的高度，所以新建一个<div>占位：

<div style="height:80px">
</div>

效果如下：

但是处理以下情况的时候就出现问题了：

当点击导航上的链接的时候，页面内容因为导航栏的遮挡，显示不完全。请看下面的图：

怎样使内容显示不被导航栏遮挡？

这里是全部的代码。

---

最好的情况就是当点击关于的时候，能显示如下画面。文章全部露出来，上下箭头露出来，下一篇文章的上箭头露出来。

Answer 1

在盡量不影響原先佈局的情況下，可以用一個隱藏的錨點來代替

<article id="main" class="row">
  <span id="main-anchor"></span> <!-- 隱藏錨點 -->
  <h2>Jack's in the sky</h2>
  <div class="arrow-down">
    <a href="#photo-anchor"><span class="glyphicon glyphicon-chevron-down"></span></a>
  </div>

<!-- 省略 -->

這樣就能隨意調整錨點位置，控制顯示畫面

.anchor {
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
}

效果

Codepen

Answer 2

你如果是用锚点实现导航的话，你可以给锚点设个margin-top:-80px;
如果是用js实现的话，就更简单，可以直接设置scrollTop