顶部横幅阻止锚链接
回答嗨,伙计们!这个问题把我弄糊涂了，所以我尽量说得具体一点。
我们的指南主题有一个顶部横幅(你可以看到它在https://support.aha.io/hc/en-us）.它允许用户做一些事情，比如提交新请求或检查系统状态。
在一篇文章中，任何时候我使用标题(h1, h2等)，我也可以使用[link] > Heading将其用作锚链接。
问题是，如果我点击一个链接到标题的锚链接，页面跳转到标题-但忽略了顶部的横幅。因此，结果是锚链接跳得太远——最终用户看不到标题。
明白了吗?所以最终用户会看到这样的东西，标题在那个横幅下面:
是否有一种方法，使它，使文章不滚动下的顶部横幅?这样，点击锚点链接，读者就能直接看到标题，而不是它下面一英寸的地方?
谢谢!
-
作为一种解决方法，我可以创建一个手动锚链接，设置比标题高几行-但这意味着每个锚的源代码，如果我调整文章的文本，锚可能不会再指向正确的位置了。
-
你好埃里克,
你不是唯一一个有同样问题的人——我们也有同样的问题。我们使用和你们一样的解决方法。想看看有没有人能找到更好的解决方案。
谢谢,
玛吉
-
你好埃里克,
好问题!
我将把这篇文章添加到我们每月的社区综述中，以帮助更多的人关注你的问题。
欢呼:)
-
谢谢你！
-
我也有同样的问题!如果能找到解决办法就太好了。:)
-
这是因为你的导航栏有一个CSS属性“position: fixed”。块元素可以有这个，这意味着它们从文档的正常流程中分离出来，而被固定到视窗中。所以你的页面就消失在后面了。
我想有一些解决办法。最简单的是这个:https://grobmeier.solutions/div-starting-after-fixed-div-28082015.html
或者你可以使用jQuery的方法:https://stackoverflow.com/questions/4797350/how-to-clear-content-from-a-position-fixed-element-of-variable-height
希望这对你有所帮助。
-
谢谢Floris !我今天刚刚找到了一个有效的解决方案，我认为它的原理是一样的。只是CSS而不是jQuery。
我们的Z亚博endesk代表做了一些调查，发现了这篇文章，其中有答案:https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header
解决方案张贴在那里没有帮助，因为它移动了标题本身，并把它塞在文本的其他地方。
但是通过结合:目标通过对那篇文章的评论，我找到了一个非常有效的解决方案。
目标:{
padding-top: 79 px;
margin-top: -79 px;
显示:inline-block;
}如果我理解的话(很可能我不明白)，它给锚链接目标一个填充，这是我们的顶层横幅的高度(≈80px)。
不管它在说什么，将它添加到style.css中立即起作用了。我只需要批准把它从我的小沙箱主题转移到生产，我们就可以开始运行了。
希望这对其他人有所帮助!
-
埃里克，这太天才了!!工作完美，只需复制/粘贴到css的最后。已经投入生产。这对我们来说是一个痛处，我一直在寻找这个确切的解。
谢谢你！
-
谢谢你埃里克!!
这对我们也有效!!
我真的很感激你的帮助。祝你有美好的一天:)
-
@……如果你能考虑把你的答案贴在我们的用户提示和技巧节，这样用户更容易找到，我们会为此送你一个小礼物。:)
请登录留下评论。
10评论