如何抵消我的固定导航栏项目采用目标 id 元素的位置？

【问题标题】：How do I offset where my fixed navbar items takes target id element?如何抵消我的固定导航栏项目采用目标 id 元素的位置？
【发布时间】：2022-01-05 09:11:05
【问题描述】：

我的网站上有一个固定的导航栏，它位于顶部，带有可将我带到页面下方不同部分的链接。但是，因为我的固定导航栏的高度为 60px，所以每个部分的开头 60px 都被覆盖了。我将如何使用 HTML 或 CSS 将链接带我的位置偏移 60 像素？我做了目标元素 {top:60px, content:''} 但它谈到了两个部分之间的差距我该如何解决这个问题并且还提到了这个How do I offset where my fixed nav bar takes me? 但它不适用于我的情况。

【问题讨论】：

标签： html css vue.js

【解决方案1】：

尝试在您滚动到的内容之前添加一个单独的元素，并在那里添加60px 间隙。 HTML 会像

<span class="target" id="who_we_are"></span>
<h1>Who We Are</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

<span class="target" id="join_us"></span>
<h1>Join Us</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

而css会像

.target{
    display: block;
    height: 60px;
    margin-top: -60px;
    visibility: hidden;
}

【讨论】：