导航栏在滚动后不显示导航链接

Question

我有这个导航栏，当我在我的网页顶部时它工作正常。每当我向下滚动时，它都会滚动，但我必须到顶部才能看到导航链接。还有一件事：在我的画廊页面导航栏没有覆盖页面内容（图像）。我的主页也出现了同样的问题。我什至不能使用导航链接。请帮我。

html, body {

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100vh;

}

/* h1 {

    position: absolute;

    top: 46%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: #000000;

    font-size: 48px;

    font-family: "Playfair Display";

    font-weight: lighter;

} */

/* 

body{

    background: #101010;

} */

.toggle-btn {

    position: fixed;

    margin: 1.4em;

    padding: 1em;

    width: 40px;

    height: 12px;

    right: 0;

    z-index: 1;

}

span.one {

    position: absolute;

    width: 40px;

    height: 2px;

    background: rgb(105, 48, 48);

    margin-right: 60px;

}

span.two {

    position: absolute;

    width: 40px;

    height: 2px;

    background: rgb(105, 48, 48);

    margin-top: 12px;

    margin-right: 60px;

}

.menu {

    z-index: 0;

    position: absolute;

    background:#000000;

    height: 100vh;

    width: 100%;

    top: -200%;

}

.data {

    padding: 8em 0 0 2em;

    text-align: left;

}

ul {

    list-style: none;

}

li:first-child {

    color: grey;

    font-family: Poppins;

    font-size: 24px;

}

li:not(:first-child) {

    color: #fff;

    font-size: 42px;

}

a {

    text-decoration: none;

    color: #cccccc;

    font-family: Poppins;

}

**HTML**

Answer 1

您需要将 设置.menu为position: fixed;。您还需要z-index: 1;确保它覆盖其他内容。.menu {    z-index: 1;    position: fixed;    background: #000000;    height: 100vh;    width: 100%;    top: -200%;}