固定导航条与锚标签重叠

Question

我正在使用React，并尝试创建一个带有固定导航栏的单页网站。导航栏具有项目；"家"项目"团队""联系人"；我正在使用锚标签将导航栏中的这些项目链接到各个部分。因此，当我点击例如"；项目"；，它跳到这个部分，但该部分的顶部被导航栏覆盖(见下面的屏幕截图(。

所以我的问题是：是否有可能以导航条不覆盖部分顶部的方式使用锚标签？

屏幕截图：这就是当你点击"projekt"；在导航栏中。

我的问题与这个问题类似：；https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header"。不幸的是，我不知道如何使所提出的解决方案适应我的问题。(我是编码新手，也许这就是原因：D(

这是我的代码：

这是我的导航栏：

import React, { Component } from 'react'; 
import { IoIosChatbubbles } from "react-icons/io";
class Navbar extends Component {
render () {
return (
<nav className="navbar">
<div className="container-navbar" >
<div className="navbar__bubble">
<a href="#home">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</a>
</div>
<div className="navbar__title">
<h2> <a href="#home">Filterbub</a></h2>
</div>
<div className="navbar__navigation-items">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#projekt">Projekt</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</div>
</div>
</nav>  
)
}
}
export default Navbar;

例如，这是项目部分：

import React, { Component } from 'react'; 
class Projekt extends Component {
render () {
return (
<main id="projekt" style={{marginTop: '100px'}}>
<div className="container-pagecontent">
<h1>Unser Projekt</h1>
<p>Bacon ipsum dolor amet shoulder short ribs shankle brisket. Biltong ham hock shankle pork chop pork flank. Tri-tip chicken hamburger, swine doner bresaola filet mignon picanha sirloin shoulder. Cow doner chuck ribeye, t-bone tri-tip ham hock shoulder pork. Tail capicola sirloin short loin jerky turducken ground round tri-tip shankle sausage bresaola salami bacon. Landjaeger sausage ham jowl filet mignon chicken ground round porchetta burgdoggen short loin. Ham hock short ribs pork chop filet mignon, andouille cupim pork belly alcatra buffalo turducken shoulder.</p>
<p>Prosciutto t-bone cow flank andouille ham. Short loin jerky pork loin, rump tail pastrami porchetta shankle shank turducken cupim spare ribs. Cupim bresaola pancetta tail ham prosciutto shoulder short ribs buffalo t-bone sausage filet mignon swine chicken. Spare ribs ground round hamburger short loin chicken jerky pork chop boudin landjaeger drumstick doner pork belly.</p>
</div>
</main>
)
}
}
export default Projekt

这是导航栏的scs代码。

.navbar {
background: #1763A5;
position: fixed; 
width: 100%;
top: 0;
padding: .7rem 0;
height: 47px;
display: flex;
border-bottom: 1px solid lighten(black, 30%);
}
.navbar__bubble {
color: white;
cursor: pointer;
margin-top: 5px;
float: left;
}
.navbar__bubble a:visited {
color: white;
}
.navbar__bubble a:link {
text-decoration: none;
}
.navbar__title {
color: white; 
margin-top: 15px;
font-size: $m-size;
margin-left: 10px;
margin-top: -10px;
cursor: pointer;
}
.navbar__title h2 a:visited {
color: white;
}
.navbar__title h2 a:link {
text-decoration: none;
}
.navbar__navigation-items {
color: white; 
margin-top: 15px;
font-size: $m-size;
margin-left: auto;
cursor: pointer;
}
.navbar__navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 30px; 
list-style: none;
}
.navbar__navigation-items a:visited {
color: white;
}
.navbar__navigation-items a:hover,
.navbar__navigation-items a:active {
color: black;
background-color: white;
}
.navbar__navigation-items a:link {
text-decoration: none;
}
.navbar__subtitle {
margin-top: 28px;
}

如果您需要了解我的代码，请告诉我。

提前感谢您的帮助！

Answer 1

将.navbar的位置从position: fixed;更改为position: sticky;