Question

将#elementid添加到网址将滚动到包含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; 
}

完整示例：

＆＃13;

$(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>'));
  });
});

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

更新：

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

在不影响背景颜色的情况下向滚动目标添加滚动偏移

1 个答案: