html - 在不影响背景颜色的情况下，为哈希目标添加滚动偏移量

Question

添加#elementid到 URL 将滚动到带有 id="elementid" 的元素.我有一个 position: fixed导航栏，所以我需要对滚动位置应用偏移量，否则它会隐藏在导航栏后面。我见过的最好的方法是添加一个高 :before元素，以便浏览器滚动到元素上方一点。

.anchor:before { 
    display: block; 
    content: " "; 
    margin-top: -100px; 
    height: 100px; 
    visibility: hidden; 
}

我还想通过使用 :target 设置背景颜色来突出显示该元素。选择器。问题是由于 :before，背景现在变大了很多。元素:

我想要的是:

这很棘手，因为 :before和 :target需要在同一个<h1>与 id .可能吗？

工作示例:

$(document).ready(function() {
  $('h1, h2, h3').each(function() {
    if (this.id)
      $(this).addClass('anchor').append($('<a class="anchorlink" href="#' + this.id + '" title="link to this headline">¶</a>'));
  });
});

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
body {
  padding-top: 50px;
  background: #888;
}
.nav {
  font-size: 40px;
  background: #444;
  color: #ddd;
  position: fixed;
  top: 0px;
  height: 50px;
  width: 100%;
}
.content {
  background: white;
  padding: 12px;
  width: 400px;
  margin: 0 auto;
}
/* from https://github.com/twbs/bootstrap/issues/1768 */

.anchor:before {
  display: block;
  content: " ";
  margin-top: -100px;
  height: 100px;
  visibility: hidden;
}
/* from http://snook.ca/archives/html_and_css/yellow-fade-technique-css-animations */

:target {
  background-color: rgba(68, 180, 73, 0);
  -webkit-animation: target-fade 4s;
  animation: target-fade 4s;
}
@keyframes target-fade {
  0% {
    background-color: rgba(68, 180, 73, 0.0);
  }
  10% {
    background-color: rgba(68, 180, 73, 0.4);
  }
  100% {
    background-color: rgba(68, 180, 73, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav">Navbar</div>
<div class="content">
  <h1 id="t1">Title1</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in velit et nisi lobortis feugiat in dapibus odio. Quisque porttitor lacus viverra vulputate tincidunt. Curabitur cursus ex ac dolor hendrerit semper. Maecenas et urna eu lorem faucibus
  vehicula. Sed lacinia ipsum et enim consectetur, eu maximus nulla fringilla. Curabitur fermentum aliquam arcu, id luctus augue. Fusce pulvinar sapien vel finibus maximus. Morbi dignissim aliquam sem, id imperdiet magna placerat at. Vivamus placerat
  urna et ipsum viverra laoreet.

  <h1 id="t2">Title2</h1>
  Phasellus varius nunc sed mi egestas eleifend. Cras condimentum sed eros sit amet porttitor. Vestibulum hendrerit mauris feugiat venenatis vestibulum. Morbi id eleifend nibh. Nulla facilisi. Vivamus fringilla, ipsum ac iaculis hendrerit, turpis nisi gravida
  lorem, id mattis est massa vel arcu. Integer euismod eleifend tristique.

  <h1 id="t3">Title3</h1>
  In dignissim nulla nec justo egestas, vehicula rutrum orci interdum. Curabitur sed quam lobortis, maximus sem eu, accumsan metus. Sed urna quam, rutrum in posuere a, elementum nec enim. Ut pulvinar sodales ultricies. Aenean a nisi venenatis ante auctor
  sodales eget aliquet orci. Donec congue, massa a consectetur egestas, dui erat mattis massa, sit amet fringilla mauris elit eget orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc malesuada euismod diam,
  ut pretium metus. Phasellus ut rutrum ante. Duis ut nulla nec lacus accumsan ultrices. Nam lacinia finibus orci suscipit vulputate. In elit orci, aliquet vitae sem eu, porta gravida quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
  volutpat tincidunt lectus, ut laoreet lacus venenatis vel.

  <h1 id="t4">Title4</h1>
  Curabitur tristique ullamcorper augue, sit amet volutpat est placerat vel. Duis vel quam sit amet erat molestie interdum ut quis velit. Nulla iaculis luctus viverra. Phasellus vel ante elementum, posuere ante et, mattis odio. Integer tincidunt pharetra
  ex. Nullam vulputate quam varius ex laoreet ultrices. Donec condimentum, sem vitae dapibus molestie, tortor sem dictum tellus, eu tempor nisl sapien id sem. Proin dapibus tempor pulvinar. Aliquam erat volutpat.

  <h1 id="t5">Title5</h1>
  Proin dapibus, nulla molestie consequat aliquet, turpis nulla eleifend mi, nec congue felis erat nec purus. Ut a lacinia metus, at pellentesque augue. Curabitur sagittis pulvinar nisi id interdum. Mauris cursus, massa at finibus vehicula, urna eros ullamcorper
  ipsum, id convallis ipsum dolor ac enim. Sed hendrerit turpis in bibendum fringilla. Nunc a semper sapien. Proin vitae iaculis dolor. Ut placerat, libero ac vulputate dictum, velit ligula hendrerit turpis, vel aliquam felis purus eget sem. Ut ultricies
  lacinia consequat. Morbi sed ullamcorper nulla, nec placerat leo. Integer non fermentum tellus. Phasellus id lorem ex. Mauris metus turpis, elementum ac venenatis nec, finibus vitae urna.

</div>

Answer 1

CSS background-clip 最终成功了。在我的例子中，将负边距应用于标题没有问题，而不是使用 .anchor:before。

.anchor {
    margin-top: -100px;
    padding-top: 100px;
    -moz-background-clip: content;
    -webkit-background-clip: content;
    background-clip: content-box; 
}

完整示例:

$(document).ready(function() {
  $('h1, h2, h3').each(function() {
    if (this.id)
      $(this).addClass('anchor').append($('<a class="anchorlink" href="#' + this.id + '" title="link to this headline">¶</a>'));
  });
});

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
body {
  padding-top: 50px;
  background: #888;
}
.nav {
  font-size: 40px;
  background: #444;
  color: #ddd;
  position: fixed;
  top: 0px;
  height: 50px;
  width: 100%;
}
.content {
  background: white;
  padding: 12px;
  width: 400px;
  margin: 0 auto;
}

/* from https://github.com/twbs/bootstrap/issues/1768 */
/*
.anchor:before {
  display: block;
  content: " ";
  margin-top: -100px;
  height: 100px;
  visibility: hidden;
}
*/

.anchor {
	margin-top: -100px;
	padding-top: 100px;
	-moz-background-clip: content;
	-webkit-background-clip: content;
	background-clip: content-box; 
}


/* from http://snook.ca/archives/html_and_css/yellow-fade-technique-css-animations */

:target {
  background-color: rgba(68, 180, 73, 0);
  -webkit-animation: target-fade 4s;
  animation: target-fade 4s;
}
@keyframes target-fade {
  0% {
    background-color: rgba(68, 180, 73, 0.0);
  }
  10% {
    background-color: rgba(68, 180, 73, 0.4);
  }
  100% {
    background-color: rgba(68, 180, 73, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav">Navbar</div>
<div class="content">
  <h1 id="t1">Title1</h1>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in velit et nisi lobortis feugiat in dapibus odio. Quisque porttitor lacus viverra vulputate tincidunt. Curabitur cursus ex ac dolor hendrerit semper. Maecenas et urna eu lorem faucibus
  vehicula. Sed lacinia ipsum et enim consectetur, eu maximus nulla fringilla. Curabitur fermentum aliquam arcu, id luctus augue. Fusce pulvinar sapien vel finibus maximus. Morbi dignissim aliquam sem, id imperdiet magna placerat at. Vivamus placerat
  urna et ipsum viverra laoreet.

  <h1 id="t2">Title2</h1>
  Phasellus varius nunc sed mi egestas eleifend. Cras condimentum sed eros sit amet porttitor. Vestibulum hendrerit mauris feugiat venenatis vestibulum. Morbi id eleifend nibh. Nulla facilisi. Vivamus fringilla, ipsum ac iaculis hendrerit, turpis nisi gravida
  lorem, id mattis est massa vel arcu. Integer euismod eleifend tristique.

  <h1 id="t3">Title3</h1>
  In dignissim nulla nec justo egestas, vehicula rutrum orci interdum. Curabitur sed quam lobortis, maximus sem eu, accumsan metus. Sed urna quam, rutrum in posuere a, elementum nec enim. Ut pulvinar sodales ultricies. Aenean a nisi venenatis ante auctor
  sodales eget aliquet orci. Donec congue, massa a consectetur egestas, dui erat mattis massa, sit amet fringilla mauris elit eget orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc malesuada euismod diam,
  ut pretium metus. Phasellus ut rutrum ante. Duis ut nulla nec lacus accumsan ultrices. Nam lacinia finibus orci suscipit vulputate. In elit orci, aliquet vitae sem eu, porta gravida quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
  volutpat tincidunt lectus, ut laoreet lacus venenatis vel.

  <h1 id="t4">Title4</h1>
  Curabitur tristique ullamcorper augue, sit amet volutpat est placerat vel. Duis vel quam sit amet erat molestie interdum ut quis velit. Nulla iaculis luctus viverra. Phasellus vel ante elementum, posuere ante et, mattis odio. Integer tincidunt pharetra
  ex. Nullam vulputate quam varius ex laoreet ultrices. Donec condimentum, sem vitae dapibus molestie, tortor sem dictum tellus, eu tempor nisl sapien id sem. Proin dapibus tempor pulvinar. Aliquam erat volutpat.

  <h1 id="t5">Title5</h1>
  Proin dapibus, nulla molestie consequat aliquet, turpis nulla eleifend mi, nec congue felis erat nec purus. Ut a lacinia metus, at pellentesque augue. Curabitur sagittis pulvinar nisi id interdum. Mauris cursus, massa at finibus vehicula, urna eros ullamcorper
  ipsum, id convallis ipsum dolor ac enim. Sed hendrerit turpis in bibendum fringilla. Nunc a semper sapien. Proin vitae iaculis dolor. Ut placerat, libero ac vulputate dictum, velit ligula hendrerit turpis, vel aliquam felis purus eget sem. Ut ultricies
  lacinia consequat. Morbi sed ullamcorper nulla, nec placerat leo. Integer non fermentum tellus. Phasellus id lorem ex. Mauris metus turpis, elementum ac venenatis nec, finibus vitae urna.

</div>

更新:

如果标题上有 :hover 定义，它将在悬停在顶部的额外填充上时激活。我通过用 :hover 与 span 包装标题内容来解决这个问题。