固定顶部导航元素和锚点

Question

以下CSS会导致锚链接被导航栏隐藏。

您有什么解决方案，可以使锚链接文本显示在其下方？

/* style and size the navigation bar */
table.navigation#top
{
  position: fixed;
  margin-top: 0;
  margin-bottom: 0;
  top: 0;
  left: 0;
  z-index: 10;
}

谢谢

- elmarco

Answer 1

您可以使用position:fixed和top:0（就像您已经在做的那样）将导航栏固定在原位，并将其height设置为给定值，然后将相同的值应用于每个目标锚点的padding-top属性。

这样，当单击导航链接时，锚元素的顶部将移动到浏览器视口的顶部，虽然它们将被导航栏部分覆盖（由于在导航栏中设置了z-index:1），但这个被覆盖的部分将是填充区域，不会有任何内容，并且通常是不可见的（除非添加边框或背景颜色）。因此，内容将正确地从导航栏之后开始。

以下是示例代码：

• css:

  #navbar
  {
    position: fixed;
    top: 0;
    z-index: 1;
    height: 1em;
    margin: 0;
  }
  
  .heading
  {
    padding-top: 1em; 
  }
  

• html:

  <div id="content">
    <h2 id="one" class="heading">第一部分</h2>
    ...
    <h2 id="two" class="heading">第二部分</h2>
    ...
    <h2 id="three" class="heading">第三部分</h2>
    ...
  </div>
  <div id="navbar">
    <a href="#one">第一部分</a>
    <a href="#two">第二部分</a>
    <a href="#three">第三部分</a>
  </div>
  

当然，这并没有解决动态导航栏高度的问题，但是Bryan建议使用JavaScript可能是实现这一点最简单（唯一？）的方法。

附带说明 - 请记住，如果id元素具有display:block或display:inline-block，则填充将对页面布局产生影响，这可能不是想要的。

- waldyrious

Answer 2

看这里here，D方法解决了我的问题。CSS基本上是：

#method-D {
    border-top:50px solid transparent;
    margin-top:-50px;
    -webkit-background-clip:padding-box;
    -moz-background-clip:padding;
    background-clip:padding-box;
} 

我正在使用一個動態導航欄，在它即將隱藏時固定在頂部。

- Jorge E. Cardona

Answer 3

将您的导航栏放置在一个容器内，该容器具有与导航栏高度相匹配的 padding-top。

您还应该能够使用 position: relative 定位链接，并给它们一个与导航栏高度相匹配的 top。

- Bryan Downing

---

我会使用JavaScript来获取导航栏的高度，并将该值设置为包含元素的padding-top。 - Bryan Downing