固定顶部导航元素和锚点

使用以下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; 
}

感谢

来源

2010-05-11 elmarco

把您的导航栏，有您的导航栏的高度匹配padding-top一个容器内。

你也应该可以position: relative你的链接给他们一个top匹配你的导航栏的高度。

来源

2010-05-11 19:12:52

谢谢，如果我不知道身高？ – elmarco 2010-05-11 21:42:21

我会使用JavaScript来获取导航栏的高度，并将该值设置为包含元素的“padding-top”。 – 2010-05-13 05:10:45

您可以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，则填充会影响页面布局，这可能不合意。

来源

2012-01-20 17:06:01 waldyrious

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

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

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

来源

2013-01-21 18:52:27

固定顶部导航元素和锚点

回答

相关问题