javascript - 固定导航栏与锚标签重叠

问题描述

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

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

屏幕截图：这是您在导航栏中单击“项目”时的外观。

我的问题类似于这个问题：“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;
}

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

在此先感谢您的帮助！

标签： javascriptreactjssassnavbaranchor

javascript - 固定导航栏与锚标签重叠

问题描述

解决方案

推荐阅读