我正在为一个加密货币迷因创建一个网站，问题是我的导航栏没有与我创建的CSS中带有"不透明"参数的一些链接和卡片重叠。当我向下滚动时，我想让我的导航栏与所有内容重叠。
示例照片https://i.stack.imgur.com/2SsEk.jpg
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto&family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="CSS/navbar.css">
<link rel="stylesheet" href="CSS/buttons.css">
<link rel="stylesheet" href="CSS/details.css">
<link rel="stylesheet" href="CSS/container.css">
<link rel="stylesheet" href="CSS/container2.css">
<link rel="stylesheet" href="CSS/container3.css">
<link rel="stylesheet" href="CSS/footer.css">
<link rel="icon" type="image/gif/png" href="assets/shitcoin_logo.png">
<title>Shitcoin - Worst crypto currency</title>
</head>
<body>
<header>
<div class="Nav-Container">
<a href=""><img class="logo" src="assets/shitcoin_logo.png" alt=""></a>
<nav class="navbar">
<ul>
<li class="navbar-links"><a href="">Home</a></li>
<li class="navbar-links"><a href="">About us</a></li>
<li class="navbar-links"><a href="">Stake</a></li>
<li class="coinprice"><img src="assets/shitcoin_logo.png" alt=""><p>: $0.00213</p></li>
<li><a href="#" class="walltet">Connect Wallet</a></li>
</ul>
</nav>
</div>
</header>
<div class="container1">
<div class="aboutcointext">
<h1>Welcome to the <span>THUNDER</span> project homepage</h1>
<h2>Worst cypto coin available on the market!</h2>
<a href="" class="buycoin">Buy Thunder (THD)</a>
</div>
<div class="aboutcoinlinks">
<a href="" class="fb">Facebook</a>
<a href="" class="insta">Instagram</a>
<a href="" class="twitter">Twitter</a>
</div>
</div>
<div class="details">Why you should <span>NOT</span> invest in us?</div>
<div class="container2">
<div class="reason1">
<img src="assets/man_on_toilet.png" alt="">
<h3>Reason 1:</h3>
<p>We have very little to no experience in the crypto world</p>
</div>
<div class="reason2">
<img src="assets/just_toilet.png" alt="">
<h3>Reason 2:</h3>
<p>This coin is made as a joke and should not be taken seriously</p>
</div>
<div class="reason3">
<img src="assets/money-pngrepo-com.png" alt="">
<h3>Reason 3:</h3>
<p>Your capital is at risk and we are not responsible for your money</p>
</div>
</div>
<div class="mining_details">You can mine <span>Shitcoin</span> but we don't guarantee you'll make money</div>
<div class="container3">
<div class="">
<p>Compact tool made by us to help you mine easier:</p>
<a href="" class="minerbutton">Download THD miner</a>
</div>
</div>
<footer>
<div class="footer-container">
<h2>Contact Us</h2>
<ul>
<li><a href="">Support</a></li>
<li><a href="">Email</a></li>
<li><a href="">About Us</a></li>
</ul>
</div>
<div class="footer-container">
<h2>FAQ</h2>
<ul>
<li><a href="">How to buy?</a></li>
<li><a href="">How to sell?</a></li>
<li><a href="">How to mine THD?</a></li>
<li><a href="">More...</a></li>
</ul>
</div>
</footer>
</body>
</html>
导航栏的CSS代码：
body{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background: linear-gradient(0deg, rgba(47,48,48,1) 0%, rgba(73,80,87,1) 100%);
/* background-color: #495057; */
color: white;
}
header{
position: sticky;
top: 0;
background-color: #ADB5BD;
}
header::after{
content: '';
display: table;
clear:both;
}
.Nav-Container{
width: 80%;
margin: 0 auto;
}
.logo{
width: 5rem;
float: left;
}
.navbar{
float: right;
/* text-align: center; */
}
.navbar ul{
list-style: none;
margin:0;
padding:0;
}
.navbar li{
display: inline-block;
margin-left: 70px;
padding-top: 31px;
position: relative;
}
.navbar a{
color: #495057;
text-decoration: none;
text-transform: uppercase;
}
.navbar a:hover{
color: white;
}
.navbar-links::before{
content:'';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 0%;
transition: all ease 250ms;
}
.navbar-links:hover::before{
width: 100%;
}
.navbar img{
float:left;
width: 2rem;
position: relative;
bottom: 7px;
}
.navbar p{
display: inline;
}
.wallet{
display: inline;
padding: 5px 5px;
border: 1px solid #495057;
border-radius: 7px;
}
社交媒体链接的CSS代码：
.aboutcoinlinks{
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
.aboutcoinlinks a{
align-self: flex-start;
margin-left:10px;
padding: 20px 15px;
text-decoration: none;
color: white;
text-align: center;
background-color: black;
opacity:70%;
transition: all ease 250ms;
}
.aboutcoinlinks a:hover{
opacity: 100%;
}
.aboutcoinlinks .fb{
padding: 20px 15px;
background-color: #4267B2;
border: 1px solid #4267B2;
border-radius: 10px;
}
.aboutcoinlinks .insta{
padding: 20px 15px;
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
border: 1px solid linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);;
border-radius: 10px;
}
.aboutcoinlinks .twitter{
padding: 20px 15px;
background-color: #1DA1F2;
border: 1px solid #1DA1F2;
border-radius: 10px;
}
您可以参考此示例。
window.onscroll = function () { myFunction() };
var header = document.getElementById("header");
function myFunction() {
if (window.pageYOffset >= 30) {
header.classList.add("sticky")
} else {
header.classList.remove("sticky");
}
}body{
margin:0;
}
header{
position: fixed;
width: 100%;
padding: 5px 20px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.75s;
}
header .logo{
color: rgb(255, 255, 255);
font-weight: 700;
font-size: 30px;
text-decoration: none;
}
header .nav{
position: relative;
display: flex;
}
header .nav li{
list-style: none;
margin-left: 50px;
height:100%;
}
header .nav li a{
text-decoration: none;
color: #fff;
font-weight: 300;
font-size: 20px;
}
header.sticky{
background: rgba(255,255,255,0.85);
padding-top:0px;
padding-bottom:0px;
box-shadow: 0 5px 20px rgba(0,0,0,0,0.5);
height:3.75rem;
}
header.sticky .logo{
color: rgb(0, 0, 0);
}
header.sticky ul{
height:100%;
}
header.sticky ul li{
height:100%;
display:flex;
align-items: center;
}
header.sticky ul li a{
color:rgb(204, 34, 34);
}
header.sticky .nav li:hover{
border-bottom: 5px solid #ff0157;
}
p{
font-weight: 300;
color: #111;
}
.ban{
position: relative;
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg,rgba(255,255,255,0.1),rgba(0,0,0,0.35)),url('https://winteriscoming.net/files/2021/01/thor-4-marvel-chris-hemsworth.jpg');
background-repeat: no-repeat;
background-size:cover;
background-position:left;
}
.ban .box{
max-width: 1000px;
text-align: center;
}
.ban .box h3{
font-size: 5rem;
color: #fff;
}
.ban .box p{
font-size: 1rem;
color: #fff;
}<header id="header">
<a href="#ban" class="logo">Avenger</a>
<ul class="nav">
<li><a href="#ban">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#expert">Expert</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</header>
<section class="ban" id="ban">
<div class="box">
<h3>Always Choose Good</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sit nemo blanditiis tenetur, autem enim
similique dolor saepe earum consequuntur.</p>
<a href="#menu" class="bnt">Our Menu</a>
</div>
</section>