导航栏后面的CSS锚链接

7fyelxc5 于 2023-02-10 发布在其他

关注(0)|答案(2)|浏览(122)

我的CSS：

html,body {margin:0;
                           overflow: hidden;

                background: #3D537C;
                font-family: 'Montserrat', sans-serif;
                padding-top: 47px;
            }

            .navbar {
              //  overflow: hidden;
                background-color: #333;
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 1;
            }

            .navbar a {
                float: left;
                display: block;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }

            .main {
                padding: 16px;
                margin-top: 30px;
                height: 1500px; /* Used in this example to enable scrolling */
            }
            /*Just Sidebar*/
            .sidebar {
                position: fixed;
                width: 200px;
                height: auto;
                margin: 50px auto;
                background: #3D537C;
            }
            .content {
                margin-left: 200px;
                height: 2500px;
                width: auto;
                background: #AFCBFF;
                overflow: auto;
                top: -10px;
                z-index: 2;
                padding-top: 40px; 
                margin-top: -40px;
            }
            /*.info {
                width: 1440px;
                height: 300px;
                position: relative;
                background: #f55;
            }*/
            a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
        }
}

我的HTML：

<body>
    <div class="navbar">
        <a href="#About">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
    </div>
    <div class="sidebar"> <a href="#About">About</a>
                    <a href="#random">Random</a>

    </div>
    <div class="content">
        <div id="About">
            <p>Hier wird was über mich stehen</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p></div>

        <div id="random"> Hier wird irgendwas kommen
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>

当点击侧边栏/导航栏锚链接时，文本被我的固定导航栏挡住了。无论我怎么试，我都找不到解决方案，而且我在CSS方面也不是很好。

PS：请使用普通CSS，不要使用JS/JQuery

小提琴：https://jsfiddle.net/ent848pf/

css

来源：https://stackoverflow.com/questions/42985085/css-anchor-links-behind-navigation-bar

2条答案

按热度按时间

von4xj4u1#

把这个添加到你的css中，希望对你有帮助。

#About, #random{
 padding-top: 100px;
}

赞(0）回复(0）举报 2023-02-10

polhcujo2#

当导航打开时，content的顶部会被遮挡。为了避免这种情况，当滑块打开时，您需要margin-top。因此您需要：

.content {
  margin-top: 0;
  /*
  transition: [the-time-in-your-sidebar-shows] margin-top [timing-fucntion-of-navigation]; */
  transition: .3s margin-top ease; /*real example*/
}

.navigation.open ~ .content {
  margin-top: [height-of-navigation];
  margin-top: 20px; /*real-example*/
}

.sidebar.open + .content {
  margin-top: [height-of-navigation];
  margin-top: 20px; /*real-example*/
}

赞(0）回复(0）举报 2023-02-10

我来回答

导航栏后面的CSS锚链接

2条答案

相关问题

热门标签

最新问答