Question

我的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/

Answer 1

当您的导航打开时，它会遮挡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*/
}

Answer 2

在你的CSS中添加它。希望这会对你有所帮助。

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

导航栏后面的CSS锚点链接

2 个答案: