固定的页眉与页内锚重叠

我创建了一个带有几个换行符的div并给出了id，然后将要显示的代码放在下面。然后，该链接会将您带到图像上方的空间，并且标题将不再妨碍您：

<a href="#image">Image</a>
<div id="image"><br><br></div>
<img src="Image.png">

当然，您可以更改换行符的数量以适合您的需求。这对我来说非常理想，尽管不确定是否有任何问题，但我仍在学习HTML。

我之所以使用这种方法，是因为出于某种原因，提出的其他解决方案均对我没有实际作用。我保证我尝试过。

section {
   position: relative;
   border-top: 52px solid transparent; /* navbar height +2 */
   margin: -30px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

section:before {
   content: "";
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   border-top: 2px solid transparent;
}

如果愿意，可以用班级代替节。

source: Jump links and viewport positioning

• Tested on Firefox 45 and Chrome 52.
• bootstrap version: 3.3.7

For those who do not believe me I kindly prepared a jsfiddle with the solution in it: SOLUTION

使用:before实现非常有效，直到我们意识到伪元素实际上覆盖并阻止了伪元素区域内的指针事件。在锚点上甚至直接在锚点pointer-events: none上使用类似的东西:before都没有影响。

我们最终要做的是使锚的位置绝对，然后将其位置调整为固定区域的偏移/高度。

偏移锚点，不阻塞指针事件

.section-marker {

    position: absolute;
    top: -300px;
}

这样做的价值在于我们没有阻止任何可能落在这300px之内的元素。不利的一面是，从Javascript获取元素的位置时需要考虑该偏移量，因此必须调整其中的任何逻辑。

<div style="position:relative; top:-45px;">
    <a name="fragment"> </a>
</div>

这段代码可以解决问题。交换45px即可获得标题栏的高度。

编辑：如果使用jQuery是一个选项，我也已经成功使用具有偏移值集的jQuery.localScroll。offset选项是jQuery.scrollTo的一部分，jQuery.scrollTo是jQuery.localScroll的基础。此处提供了一个演示：http : //demos.flesler.com/jquery/scrollTo/（第二个窗口，在“偏移”下）

我需要一些适用于入站链接，页面上的链接并且可以被JS定位的东西，以便页面可以响应页眉高度的变化

的HTML

<ul>
  <li><a href="#ft_who">Who?</a></li>
  <li><a href="#ft_what">What?</a></li>
  <li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2> 
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2> 

的CSS

.fragment-target {
    display: block;
    margin-top: -HEADER_HEIGHTpx;
    padding-top: HEADER_HEIGHTpx;
    z-index: -1;
}

将z-index: -1允许在片段目标上方的“填充区域”链接，还是点击，作为对他的回答评论说@MuttenXd

我尚未在IE 11，Edge 15 +，Chrome 38 +，FF 52+或Safari 9.1+中发现问题

我对上面列出的答案没有任何运气，最终使用了效果很好的解决方案...

在要设置锚点的位置创建一个空白跨度。

<span class="anchor" id="section1"></span>
<div class="section"></div>

并应用以下课程：

.anchor {
  display: block;
  height: 115px;       /* same height as header */
  margin-top: -115px;  /* same height as header */
  visibility: hidden;
}

即使这些部分具有不同的彩色背景，该解决方案也将有效！我在此链接中找到了解决方案。

我发现最干净的方法是以下一种：

  #bar::before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
  }

在我的纯粹主义者看来，这有点怪异，但作为纯CSS解决方案，您可以使用:target选择器将填充添加到活动的锚定元素中：

html, body {height:100%; min-height:100%; margin:0;}
body {min-height:200%;}
header {display:inline-block; position:fixed; font-size:1.5em; height:100px; top:0; left:0; right:0; line-height:100px; background:black; text-align:center;}
header a {color:#fff;}
section {padding:30px; margin:20px;}
section:first-of-type, section:target {padding-top:130px;}

<header><a href="#one">#One</a> <a href="#two">#two</a> <a href="#three">#three</a></header>
<section id="one"><h1>One</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="two"><h1>Two</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="three"><h1>Three</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>

我发现我不得不使用这两种 MutttenXd的和Badabam的CSS解决方案结合在一起，作为第一个在Chrome没有工作，Firefox中的第二个没工作：

a.anchor { 
  padding-top: 90px;
}

a.anchor:before { 
  display: block;
  content: "";
  height: 90px;
  margin-top: -90px;
}

<a class="anchor" name="shipping"></a><h2>Shipping (United States)</h2>
...

使用上面提到的“ anchor：before”方法，我可以轻松地将它与CSS和HTML一起使用。我认为效果最好，因为它不会在div之间产生大量填充。

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

它似乎不适用于页面上的第一个div，但是您可以通过在第一个div上添加填充来解决这一问题。

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

这是一个有效的小提琴：http : //jsfiddle.net/FRpHE/24/

刚刚发现了另一个对我来说像个魅力的纯CSS解决方案！

html {
  scroll-padding-top: 80px; /* height of your sticky header */
}

在此网站上找到！

我在这里和其他地方的许多答案都遇到了很多麻烦，因为我标记为书签的锚点是FAQ页面中的节标题，因此抵消标题无济于事，因为其余内容只会保留在原处。所以我认为我会发布。

我最终要做的是将一些解决方案组合在一起：

1. CSS：

   .bookmark {
       margin-top:-120px;
       padding-bottom:120px; 
       display:block;
   }
   

其中“ 120px”是您固定的标题高度（可能加上一些边距）。

2. 书签链接HTML：

   <a href="#01">What is your FAQ question again?</a>
   

3. 带书签的内容HTML：

   <span class="bookmark" id="01"></span>
   <h3>What is your FAQ question again?</h3>
   <p>Some FAQ text, followed by ...</p>
   <p>... some more FAQ text, etc ...</p>
   

此解决方案的好处是，该span元素不仅被隐藏，而且实际上已折叠并且不会填充您的内容。

我对这个解决方案不屑一顾，因为它来自大量不同的资源，但是在我的情况下，它最适合我。

您可以在此处查看实际结果。

您可以尝试以下方法：

<style>
h1:target { padding-top: 50px; }
</style>

<a href="#bar">Go to bar</a>

<h1 id="bar">Bar</h1>

将顶部填充值设置为标题的实际高度。这将在标题的顶部引入一些额外的间隙，但是只有当用户跳到锚点然后向上滚动时，该间隙才可见。我现在已经为我的网站准备了该解决方案，但是它仅在页面顶部显示一个小的固定栏，没有什么太高的。

这个对我有用：

HTML锚点链接：

<a href="#security">SECURITY</a>

HTML锚点：

<a name="security" class="anchor"></a>

CSS：

.anchor::before {
    content: "";
    display: block;
    margin-top: -50px;
    position: absolute;
}

对于Chrome / Safari / Firefox，您可以添加，display: block并使用负边距来补偿偏移量，例如：

a[name] {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

参见示例http://codepen.io/swed/pen/RrZBJo

我发现处理此问题的最佳方法是（用固定的元素高度替换65px）：

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

如果您不喜欢使用目标选择器，也可以按照以下方式进行操作：

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

注意：如果目标元素的背景颜色与其父元素不同，则此示例将不起作用。例如：

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

在这种情况下，my-target元素的绿色将以65px覆盖其父红色元素。我没有找到任何纯CSS解决方案来解决此问题，但是如果您没有其他背景色，则此解决方案是最好的。

html, body {
  scroll-padding-top: 70px; /* height of sticky header */
}

来自：https : //css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

官方采用的答案：

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; // Set the Appropriate Height
  height: 75px; // Set the Appropriate Height
  visibility: hidden; 
}

学分

合并

我使用这种方法：

/* add class="jumptarget" to all targets. */

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

它在每个目标之前添加一个不可见元素。它适用于IE8 +。

以下是更多解决方案：http : //nicolasgallagher.com/jump-links-and-viewport-positioning/

我有同样的问题。我通过将一个类添加到锚元素（顶部栏高度为padding-top值）来解决此问题。

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

然后简单的CSS：

.anchor { padding-top: 90px; }