固定顶部导航太低

Question

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

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

我在我的 scrollspy 上添加了一个偏移量，但这并没有解决它，我不确定我该如何解决这个问题。

Answer 1

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

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

这将 "extend" 具有该 ID 的元素以某种方式使锚点位于主元素上方 60 像素（可以是任何值），而不会引起任何其他可见变化。

Answer 2

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

Answer 3

将 margin-top: -50px;padding-top: 50px; 添加到目标 ID 有效

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

Fixed-top Nav Is too low