Question

给出一个固定的导航和一些带有锚的部分；单击哈希链接时-固定导航与节锚重叠。

我看过几篇类似的文章，但似乎找不到适合我特定情况的解决方案。

由于项目限制，我无法覆盖.anchor样式或使用JavaScript来修复该偏移量或add any additional HTML elements。

尽管我可以在.anchor-the hack with a height and a negative margin中添加一个伪元素来平衡它，但在我的情况下却不起作用，因为.anchor具有顶部填充和边框。

<h3 class="anchor" id="section-1">Title 1</h3>
<p>Description 1</p>

<h3 class="anchor" id="section-2">Title 2</h3>
<p>Description 2</p>

<h3 class="anchor" id="section-3">Title 3</h3>
<p>Description 3</p>

.nav {
    position: sticky;
}
.anchor {
    border-top: 1px solid #333940;
    margin-top: 2rem;
    padding-top: 2rem;
}
.anchor::before {
}

任何人都可以帮助我找出是否有一种纯CSS方式来固定锚点的偏移量吗？

Answer 1

尝试一下。

<script type="text/javascript">
$('a[href^="#"]').on('click',function (e) {
// e.preventDefault();

  var target = this.hash,
  $target = $(target);

  $('html, body').stop().animate({
   'scrollTop': $target.offset().top-80
  }, 1000, 'swing', function () {
   window.location.hash = target;
  });
});

top-80是您想要的空间高度

修复了导航和锚点偏移问题

1 个答案: