固定导航栏重叠锚标签

问题描述

我正在使用React并尝试创建一个具有固定导航栏的单页网站。导航栏中的项目包括“家”，“项目”，“团队”，“联系人”。我正在使用定位标记将导航栏中的这些项目链接到各个部分。所以，当我点击例如“项目”，它会跳到该部分，但该部分的顶部被导航栏覆盖（请参见下面的屏幕截图）。

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

屏幕截图：This is how it looks when you click "projekt" in the navbar.

我的问题类似于以下问题：“ 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

这是导航栏的scss代码。

.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;
}

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

在此先感谢您的帮助！

解决方法

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