固定顶部导航太低

Question

在我的网站http://richardclifford.net/上，每当用户点击一页#id元素时，它会转到第一段内容并忽略所有容器填充和h2 margin-top看起来像此

我希望它滚动以包含填充或具有这样的偏移量。

我在我的卷轴上添加了一个偏移，但是没有修复它，也不确定如何解决这个问题。

Answer 1

将margin-top: -50px;padding-top: 50px;添加到可行的目标ID

#work,#about,#contact,#copyright{
    margin-top: -50px;
    padding-top: 50px;
}

Answer 2

您可以使用margin-top和padding-top来影响网站的正面。尝试将 -50px添加到margin top，将50px添加到padding top 。这将解决您的问题。

Answer 3

一种常见的方法是通过CSS将不可见的伪元素添加到链接的原始目标元素，如下所示：

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

这将“扩展”具有该ID的元素，使得锚点在主元素上方60px（可以是任何值），而不会导致任何其他可见的更改。