使用带有粘性导航栏的 <a/> 标签会将我带到错误的地方

Question

所以我在 React 中有一个 <Navbar/> 自定义组件，带有以下 CSS

.navbar-container {
    background-color: #111d5e;
    display: flex;
    position: sticky;
    top: 0;
    height: 10vh;
    width: 100%;
}

我在同一页面上有一些部分，导航栏包含指向这些部分的链接，如下所示：<a href="#projects">Projects</a>。问题是，当我单击“项目”链接时，它会将我带到“项目”部分，但它向下滚动有点太远，并将“项目”标题隐藏在粘性导航栏后面。我该如何解决这个问题？

App.js - 在这里你可以看到我的导航栏和我的部分

<div className="main">
                <Navbar />
                <div className="content">
                    <section id="home">
                        <h1>Home</h1>
                    </section>
                    <section id="about-me">
                        <h1>About me</h1>
                    </section>
                    <section id="projects">
                        <h1>Projects</h1>
                    </section>
                    <section id="contact">
                        <h1>Contact</h1>
                    </section>
                </div>
                <div style={{ height: 700 }}></div>
            </div>

这是导航栏本身：

            <div className="navbar-container">
                <div className="navbar-name-flex">
                    <h1>Page Name</h1>
                </div>
                <div className="navbar-links-flex">
                    <a href="#home">Home</a>
                    <a href="#about-me">About me</a>
                    <a href="#projects">Projects</a>
                    <a href="#Contact">Contact</a>
                </div>
            </div>

Answer 1

您应该在标题中放置一个带有正确 id 的 span 标签。

<h3><span id="one"></span>one</h3>

现在使用 2 行 CSS 来正确定位它们。

h3{ position:relative; }
h3 span{ position:absolute; top:-200px;}

更改顶部值以匹配固定标题的高度（或更多）。现在我假设这也适用于其他元素。