固定的页眉与页内锚重叠

本文翻译自：Fixed page header overlaps in-page anchors

If I have a non-scrolling header in an HTML page, fixed to the top, having a defined height: 如果我在HTML页面中有一个非滚动标题，该标题固定在顶部并具有定义的高度：

Is there a way to use the URL anchor (the #fragment part) to have the browser scroll to a certain point in the page, but still respect the height of the fixed element without the help of JavaScript ? 有没有一种方法可以使用URL锚点（ #fragment部分）使浏览器滚动到页面中的某个点，但是在没有JavaScript的帮助下仍然尊重固定元素的高度？

http://foo.com/#bar WRONG (but the common behavior): CORRECT: +---------------------------------+ +---------------------------------+ | BAR/ header | | header | +---------------------------------+ +---------------------------------+ | Here is the rest of the Text | | BAR | | ... | | | | ... | | Here is the rest of the Text | | ... | | ... | +---------------------------------+ +---------------------------------+

---

#1楼

参考：https://stackoom.com/question/H8yx/固定的页眉与页内锚重叠

---

#2楼

You can do this with jQuery: 您可以使用jQuery来做到这一点：

var offset = $('.target').offset(); var scrollto = offset.top - 50; // fixed_top_bar_height = 50px $('html, body').animate({scrollTop:scrollto}, 0);

---

#3楼

I had the same problem. 我有同样的问题。 I solved it by adding a class to the anchor element with the topbar height as the padding-top value. 我通过将一个类添加到锚元素（顶部栏高度为padding-top值）来解决此问题。

<h1><a class="anchor" name="barlink">Bar</a></h1>

And then simply the css: 然后简单的CSS：

.anchor { padding-top: 90px; }

---

#4楼

I've got it working easily with CSS and HTML, using the "anchor:before" method mentioned above. 使用上面提到的“ anchor：before”方法，我可以轻松地将它与CSS和HTML一起使用。 I think it works the best, because it doesn't create massive padding between your divs. 我认为效果最好，因为它不会在div之间产生大量填充。

.anchor:before { content:""; display:block; height:60px; /* fixed header height*/ margin:-60px 0 0; /* negative fixed header height */ }

It doesn't seem to work for the first div on the page, but you can counter that by adding padding to that first div. 它似乎不适用于页面上的第一个div，但是您可以通过在第一个div上添加填充来解决这一问题。

#anchor-one{padding-top: 60px;}

Here's a working fiddle: http://jsfiddle.net/FRpHE/24/ 这是一个有效的小提琴： http : //jsfiddle.net/FRpHE/24/

---

#5楼

The best way that I found to handle this issue is (replace 65px with your fixed element height): 我发现处理此问题的最佳方法是（用固定的元素高度替换65px）：

div:target { padding-top: 65px; margin-top: -65px; }

If you do not like to use the target selector you can also do it in this way: 如果您不喜欢使用目标选择器，也可以按照以下方式进行操作：

.my-target { padding-top: 65px; margin-top: -65px; }

Note: this example will not work if the target element have a backgound color that differant from his parent. 注意：如果目标元素的背景颜色与其父元素不同，则此示例将不起作用。 for example: 例如：

<div style="background-color:red;height:100px;"></div> <div class="my-target" style="background-color:green;height:100px;"></div>

in this case the green color of my-target element will overwrite his parent red element in 65px. 在这种情况下，my-target元素的绿色将以65px覆盖其父红色元素。 I did not find any pure CSS solution to handle this issue but if you do not have another background color this solution is the best. 我没有找到任何纯CSS解决方案来解决此问题，但是如果您没有其他背景色，则此解决方案是最好的。

---

#6楼

If you can't or don't want to set a new class, add a fixed-height ::before pseudo-element to the :target pseudo-class in CSS: 如果您不能设置新类，请在CSS的:target伪类中添加一个固定高度::before伪元素：

:target::before { content: ""; display: block; height: 60px; /* fixed header height*/ margin: -60px 0 0; /* negative fixed header height */ }

Or scroll the page relative to :target with jQuery: 或使用jQuery相对于:target滚动页面：

var offset = $(':target').offset(); var scrollto = offset.top - 60; // minus fixed header height $('html, body').animate({scrollTop:scrollto}, 0);