固定页面标题与页内定位符重叠 [英] Fixed page header overlaps in-page anchors

问题描述

如果我在HTML页面中有一个非滚动标题，将其固定在顶部，并具有定义的高度：

有没有办法使用URL锚点（ #fragment 部分）来让浏览器滚动到页面中的某个点，但仍然在没有JavaScript帮助的情况下尊重固定元素的高度？

  http://foo.com/#bar 
  

 
错误（但常见行为）：正确：
 + --------------- ------------------ + + ------------------------------ --- + 
 | BAR ///////////////////// header | | //////////////////////// header | 
 + --------------------------------- + + ---------- ----------------------- + 
 |这是Text |的其余部分| BAR | 
 | ... | | | 
 | ... | |这是Text |的其余部分
 | ... | | ... | 
 + --------------------------------- + + ---------- ----------------------- + 
 

解决方案

我有同样的问题。
我通过向顶点高度作为填充顶值添加一个类到anchor元素来解决它。

  < h1>< a class =anchorname =barlink> Bar< / a>< / h1> 
  

然后简单的css：

  .anchor {padding-top：90px; } 
  

If I have a non-scrolling header in an HTML page, fixed to the top, having a defined height:

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?

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    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

解决方案

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.

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

And then simply the css:

.anchor { padding-top: 90px; }

这篇关于固定页面标题与页内定位符重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！