Question

我在网页上有一个100px深的固定顶部导航栏，该栏上的链接转到页面下方的ID。 id与每个部分的h3标题相关联。不幸的是，点击链接页面向上移动，第一个100px隐藏在固定的顶栏后面。

我可以在页面的其他地方嵌入id，大约比我链接的点高出100px（不是那么容易，因为相当简单的图形设计）。我想知道是否有人知道有什么方法可以迫使这些id停止在页面顶部100px之外？

不幸的是，我必须将开发站点放在维护屏幕后面，这样我就无法提供URL。感谢您的期待（我的第一篇文章发布到StackOverflow！）

杰里米

Answer 1

一种解决方案是使用:target伪类来改变您的标题。诀窍是将其顶部padding增加固定元素的高度，然后通过从顶部margin减去相同的数量将它们向上移回页面。

因此，使用100像素高固定元素的示例并假设padding元素上不存在margin或h3，这里的CSS看起来如何：

h3:target{
    margin:-100px 0 0;
    padding:100px;
}

您可能需要调整这些值，具体取决于您的设计，以在固定元素和标题之间添加一些空间。

Answer 2

我找到了答案

您可以在

处看到它

导航栏上的链接代码为

<a href="#recipeshomelink">Recipes</a>

并且页面下方的目标是

<div style="position:relative;">  
<div id="recipeshomelink" style="position:absolute; top:-115px;"></div>  
</div>

显然，调整了-115px以适应顶部条形深度。

我希望这有助于其他人。

杰里米