固定顶 Nav 太低答案

【问题标题】：Fixed-top Nav Is too low固定顶 Nav 太低
【发布时间】：2018-01-07 21:43:40
【问题描述】：

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

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

我在我的 scrollspy 上添加了一个偏移量，但这并没有修复它，也不知道如何修复它。

【问题讨论】：

【解决方案1】：

将margin-top: -50px;padding-top: 50px; 添加到目标ID 即可工作

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

这将“扩展”具有该 ID 的元素，使锚点位于主元素上方 60 像素（可以是任何值），而不会导致任何其他可见变化。

【讨论】：