我在帖子中看到了这个主题 here和 here ,但他们并没有真正帮助我。不过情况非常相似:页面顶部有一个滚动页面和一个粘性菜单栏(固定 div), anchor 分散在长滚动文本中。
类似这样的 HTML:
<a name="hd1" class="anchor"><h1>Heading Foo</h1></a>
<p>this is some text, and a lot of it
...
<a href="#hd1">jump to Heading Foo</a>
...
<a name="hdx" class="anchor"><h1>Heading Bla</h1></a>
<p>and then there is more text
...
<a href="#hdx">jump to Heading Bla</a>
...
一些 CSS 目前是空的,因为我仍然只是偶然发现了这个问题
.anchor {
color: green;
}
看看this fiddle 看看它现在是如何工作的。
现在,每当我单击一个链接时,它都会将我带到 anchor 。 (耶!)唉,这也意味着现在位于页面顶部的 anchor 被粘性菜单覆盖了。 (不!)如果它能在粘性菜单下方显示就太好了。
我已经尝试了其他帖子中给出的解决方案,但无济于事。例如,在 anchor 周围添加填充实际上会在文本中添加可见的填充并创建空白;这不是我想要的。文本应该在视觉上显示为未修改。
在此先感谢提示和技巧:-)
编辑:我应该说得更清楚一点。我不需要页面顶部的空间。我确实需要每个 anchor 都在菜单栏下方。试试我原来的 fiddle ,然后单击 anchor :您将看到它们是如何定位的,以便它们被菜单栏覆盖。
最佳答案
如何为第一个 h1 设置填充?
h1:first-child {
padding-top:50px;
}
关于html - 在 HTML 中设置自定义 anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13304326/