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;
}

感谢

Answer 1

将导航栏放在容器中，padding-top与导航栏的高度相匹配。

您还应该能够position: relative您的链接为他们提供与导航栏高度相匹配的top。

Answer 2

您可以使用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">Section 1</h2>
  ...
  <h2 id="two" class="heading">Section 2</h2>
  ...
  <h2 id="three" class="heading">Section 3</h2>
  ...
</div>
<div id="navbar">
  <a href="#one">Section 1</a>
  <a href="#two">Section 2</a>
  <a href="#three">Section 3</a>
</div>

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

ps - 请记住，如果id'd元素有display:block或display:inline-block，则填充将对页面布局产生影响，这可能是不可取的。

Answer 3

查看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;
}

我正在使用一个固定在顶部的动态导航栏，当它被隐藏时。

修复了顶部导航元素和锚点

3 个答案: