jQuery 使用固定标题偏移锚链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15726795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Offsetting Anchor Links with Fixed Header
提问by aaronweber
There've been a few similar posts (offsetting an html anchor to adjust for fixed header, for example), but those solution doesn't work for my particular case.
已经有一些类似的帖子（例如，偏移 html 锚点以调整固定标题），但这些解决方案不适用于我的特定情况。
I am using jQuery to populate a Table of Contents, specifically the method described here: http://css-tricks.com/automatic-table-of-contents/. It searches for the h2 tags within the article, and then creates anchors links.
我正在使用 jQuery 来填充目录，特别是这里描述的方法：http: //css-tricks.com/automatic-table-of-contents/。它在文章中搜索 h2 标签，然后创建锚链接。
The problem is I'm using a fixed header. When I click on one of these anchor links, the target h2 is underneaththe header. One temporary solution I'm using is:
问题是我使用的是固定标题。当我单击这些锚链接之一时，目标 h2位于标题下方。我正在使用的一种临时解决方案是：
h2:target{
padding-top:[header-height];
}
This works until you scroll back up, and there's a huge gap in the middle of the content. Do y'all have any ideas on how I can offset these anchor links to account for the header? I'd like to keep the HTML as semantic as possible. Any help would be appreciated.
这一直有效，直到您向上滚动，并且内容中间有一个巨大的差距。你们对我如何抵消这些锚链接以解释标题有什么想法吗？我想尽可能保持 HTML 的语义。任何帮助，将不胜感激。
Here's a jsFiddle of what exactly I'm talking about: http://jsfiddle.net/aweber9/GbNFv/
这是我正在谈论的 jsFiddle：http: //jsfiddle.net/aweber9/GbNFv/
Thanks.
谢谢。
回答by Daniel Imms
回答by jstice4all
@Daniel Imms solution is good but if headers had top margin it would be reset by this negative top margin. I found a solution that uses pseudoclasses:
@Daniel Imms 解决方案很好，但如果标题具有顶部边距，它将被此负顶部边距重置。我找到了一个使用伪类的解决方案：
h2:before {
display: block;
content: " ";
height: 20px; /* Give height of your fixed element */
margin-top: -20px; /* Give negative margin of your fixed element */
visibility: hidden;
}
Thus this doesn't reset original top-margin.
因此，这不会重置原始的最高边距。
回答by Bryan
I find both answers together provides the most robust solution across multiple browsers. I include both in my CSS...
我发现这两个答案一起提供了跨多个浏览器的最强大的解决方案。我将两者都包含在我的 CSS 中...
a[name]:not([href]) {
padding-top: 90px;
margin-top: -90px;
}
a[name]:not([href]):before {
display: block;
content: " ";
padding-top: 90px;
margin-top: -90px;
visibility: hidden;
}
回答by Nealio
This worked for me.
这对我有用。
:target {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
