我有这个导航栏，当我在网页顶部时，它可以正常工作。每当我向下滚动它剂量滚动，但我必须到顶部才能看到导航链接。还有一件事：在我的图库页面中，导航栏没有覆盖页面内容（图像）。我的主页中发生了同样的问题。我什至不能使用导航链接。请帮助我。
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**<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- navigation animation -->
<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/nav.css') }}">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<!-- gallery css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css"/>
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400|Roboto+Mono:300i,400&display=swap" rel="stylesheet">
<!-- gsap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- parllax javascript -->
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.2.0/dist/simpleParallax.min.js"></script>
<!-- bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/custom.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='node_modules/sal.js/dist/sal.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/grid-gallery.css') }}">
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<script src="https://kit.fontawesome.com/a766f28a10.js"></script>
<title>AW Zone / {{title}}</title>
<style>
body {
font-family: 'Poppins', sans-serif;
font-family: 'Roboto Mono', monospace;
margin: 0;
padding: 0;
width: 100%;
}
</style>
</head>
<body>
<!-- new navigation is here -->
<div class="toggle-btn">
<span class="one"></span>
<span class="two"></span>
</div>
<div class="menu">
<div class="data">
<ul>
<li>Navigation</li>
<li ><a href="{{ url_for('index') }}" style="color: #ffffff;text-decoration: none;">Home</a></li>
<li ><a href="{{ url_for('gallery') }}" style="color: #ffffff;text-decoration: none;">Gallery</a></li>
<li><a href="{{ url_for('about') }}" style="color: #ffffff;text-decoration: none;">About</a></li>
<li><a href="{{ url_for('contact') }}" style="color: #ffffff;text-decoration: none;">Contact</a></li>
</ul>
</div>
</div>
<!-- navbar ends here -->
<div class="container text-center" data-sal="slide-up" data-sal-delay="1500" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
<h2 style="font-family: poppins, sens-serif;font-size: 3em;padding-top: 60px;">Gallery</h2>
</div>
<section class="gallery-block grid-gallery">
<div class="container">
<div class="heading">
<h4 id="heading" data-sal="slide-up" data-sal-delay="1200" data-sal-easing="ease-out-bouce" data-sal-duration="1200">Wedding</h4>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 item">
<a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" data-sal="slide-up" data-sal-delay="1200" data-sal-easing="ease-out-bouce" data-sal-duration="1200">
</a>
</div>
<div class="col-md-6 col-lg-4 item">
<a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</div>
<div class="col-md-6 col-lg-4 item">
<a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</div>
<div class="col-md-6 col-lg-4 item">
<a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</div>
<div class="col-md-6 col-lg-4 item">
<a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</div>
<div class="col-md-6 col-lg-4 item">
<a class="lightbox" href="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img class="img-fluid image scale-on-hover" src="https://images.pexels.com/photos/256737/pexels-photo-256737.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>
</div>
</div>
</div>
<!-- bootstrap 4 JAVASCRIPT -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- greensock -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js"></script>
<script src="{{ url_for('static', filename='node_modules/sal.js/dist/sal.js') }}"></script>
<script type="text/javascript">
var t1 = new TimelineMax({paused: true});
t1.to(".one", 0.8, {
y: 6,
rotation: 45,
opacity:1,
ease: Expo.easeInOut
});
t1.to(".two", 0.8, {
y: -6,
opacity: 1,
rotation: -45,
ease: Expo.easeInOut,
delay: -0.8
});
t1.to(".menu", 2, {
top: "0%",
ease: Expo.easeInOut,
delay: -2
});
t1.staggerFrom(".menu ul li", 2, {x: -200, opacity: 0, ease:Expo.easeOut}, 0.3);
t1.reverse();
$(document).on("click", ".toggle-btn", function() {
t1.reversed(!t1.reversed());
});
/*$(document).on("click", "a", function() {
t1.reversed(!t1.reversed());
});*/
</script>
<!-- gallery effects -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<!-- script for gallery animation -->
<script>
baguetteBox.run('.grid-gallery', { animation: 'slideIn'});
</script>
</body>
</html>
答案 0 :(得分：0)
您需要将.menu设置为position: fixed;。您还需要z-index: 1;以确保其覆盖其他内容。
.menu {
z-index: 1;
position: fixed;
background: #000000;
height: 100vh;
width: 100%;
top: -200%;
}