首页 > css position:fixed 问题

css position:fixed 问题

这里是全部的代码。

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

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

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

效果如下:

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

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

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

这里是全部的代码。


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


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

<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


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

【热门文章】
【热门文章】