使用固定位置或粘性位置固定导航栏
Fixing navbar using fixed position or sticky position
大家好，我似乎无法让 navbar 保持在屏幕顶部。如果我使用 position: fixed，navbar 会保留在内容的顶部，因此您看不到它。 position: sticky 不起作用。我认为这是由于在 body 上设置了高度？很想知道如何使用 position: fixed 来实现这一点！这是代码：
<!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">
<title>Original Trombones</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/e3044c59d5.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav class="Navbar">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
alt="original trombones logo" class="nav-img">
<ul class="nav-links">
<li><a href="#" class="link">Features</a></li>
<li><a href="#" class="link">How It Works</a></li>
<li><a href="#" class="link">Pricing</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Handcrafted, home-made masterpieces</h1>
<form class="email-form">
<div class="email-form">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
</div>
<div class="button-center">
<input class="sub-button" type="submit" value="GET STARTED">
</div>
</form>
</section>
<section class="bus-info">
<div class="features">
<div class="icon"><i class="fas fa-fire"></i></div>
<div class="desc">
<h2 class="feat-title">Premium materials</h2>
<p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fas fa-truck"></i></div>
<div class="desc">
<h2 class="feat-title">Fast Shipping</h2>
<p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
not satisfied.</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fa-solid fa-battery-full"></i></div>
<div class="desc">
<h2 class="feat-title">Quality Assurance</h2>
<p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
instrument.</p>
</div>
</div>
</section>
<section class="video">
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</section>
<section class="tromb-types">
<div class="type">
<h3 class="title-tromb">TENOR TROMBONE</h3>
<h2 class="price">0</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
<div class="type">
<h3 class="title-tromb">BASS TROMBONE</h3>
<h2 class="price">0</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
<div class="type">
<h3 class="title-tromb">VALVE TROMBONE</h3>
<h2 class="price">00</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
</section>
<footer>
<ul class="footer-links">
<li><a href="#" class="footer-link">Privacy</a></li>
<li><a href="#" class="footer-link">Terms</a></li>
<li><a href="#" class="footer-link">Contacts</a></li>
</ul>
<p class="copyright">Copyright 2016, Original Trombones</p>
</footer>
</div>
</body>
</html>
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
min-height: 100vh;
background-color: #eee;
color: black;
}
.wrapper {
display: flex;
justify-content: center;
flex-direction: column;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-weight: 900;
font-size: 1em;
padding: 20px 10px;
flex-wrap: wrap;
border-bottom: 1px solid grey;
position: sticky;
}
ul {
flex-grow: 1;
max-width: 30%;
display: flex;
justify-content: space-around;
text-decoration: none;
}
img {
display: flex;
width: 40vw;
}
ul li {
display: inline;
text-decoration: none;
display: flex;
}
.nav-links a {
text-decoration: none;
color: black;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 2em;
font-weight: 700;
padding: 20px;
}
h2 {
font-size: 1.4em;
font-weight: 700;
}
p {
font-size: 0.8em;
letter-spacing: 0.05em;
}
input[type="email"] {
padding: 5px 10px;
margin: 10px 0px;
border: solid 1px black;
width: 350px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="submit"] {
margin: 10px auto;
padding: 5px 15px;
background-color: #f1c40f;
font-weight: 900;
border: #eee solid 0px;
}
.bus-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.features {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.desc {
weight: 125px;
width: 80vw;
padding: 5px;
}
.icon {
color: #c5a00df8;
font-size: 2em;
}
.feat-title {
}
.features {
padding-top: 20px;
border: 40px 0px;
}
.video {
margin: auto;
padding: 30px 0px;
}
.tromb-types {
display: flex;
justify-content: center;
}
.type {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 50px;
margin: 20px 10px;
border: solid black 1px;
}
.title-tromb {
font-weight: 700;
font-size: 0.8em;
}
.price {
padding: 20px 0;
}
.tromb-desc {
display: flex;
flex-direction: column;
align-items: center;
}
.text {
padding-bottom: 10px;
}
footer {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 20px;
margin-right: 20px;
}
.footer-links {
display: flex;
justify-content: flex-end;
align-items: flex-end;
max-width: 100%;
}
.footer-links .footer-link {
text-decoration: none;
padding: 0px 10px;
color: black;
}
.copyright {
max-width: 100%;
margin-top: 5px;
}
@media (max-width: 700px) {
header {
font-size: 1em;
}
nav {
display: flex;
flex-direction: column;
}
nav > ul {
display: flex;
flex-wrap: wrap;
}
.tromb-types {
flex-direction: column;
justify-content: center;
align-items: center;
}
.type {
width: 300px;
}
.price {
padding: 5px 0;
}
}
</style>
1。位置：粘
到目前为止最简单的方法是使用粘滞位置，但在 header 而不是 nav。因为作为元素，只要我的 parent 在屏幕上可见，我就是粘性的。由于 header 的高度不是那么大，因此 nav 上的 position:sticky 似乎不起作用。要了解有关职位 sticky 的更多信息，您可以阅读 here.
这是工作示例：
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
min-height: 100vh;
background-color: #eee;
color: black;
}
.wrapper {
display: flex;
justify-content: center;
flex-direction: column;
}
/* lines I added*/
header {
position: sticky;
top: 0;
z-index: 99;
background: #eee;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-weight: 900;
font-size: 1em;
padding: 20px 10px;
flex-wrap: wrap;
border-bottom: 1px solid grey;
}
ul {
flex-grow: 1;
max-width: 30%;
display: flex;
justify-content: space-around;
text-decoration: none;
}
img {
display: flex;
width: 40vw;
}
ul li {
display: inline;
text-decoration: none;
display: flex;
}
.nav-links a {
text-decoration: none;
color: black;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 2em;
font-weight: 700;
padding: 20px;
}
h2 {
font-size: 1.4em;
font-weight: 700;
}
p {
font-size: 0.8em;
letter-spacing: 0.05em;
}
input[type="email"] {
padding: 5px 10px;
margin: 10px 0px;
border: solid 1px black;
width: 350px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="submit"] {
margin: 10px auto;
padding: 5px 15px;
background-color: #f1c40f;
font-weight: 900;
border: #eee solid 0px;
}
.bus-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.features {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.desc {
weight: 125px;
width: 80vw;
padding: 5px;
}
.icon {
color: #c5a00df8;
font-size: 2em;
}
.feat-title {
}
.features {
padding-top: 20px;
border: 40px 0px;
}
.video {
margin: auto;
padding: 30px 0px;
}
.tromb-types {
display: flex;
justify-content: center;
}
.type {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 50px;
margin: 20px 10px;
border: solid black 1px;
}
.title-tromb {
font-weight: 700;
font-size: 0.8em;
}
.price {
padding: 20px 0;
}
.tromb-desc {
display: flex;
flex-direction: column;
align-items: center;
}
.text {
padding-bottom: 10px;
}
footer {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 20px;
margin-right: 20px;
}
.footer-links {
display: flex;
justify-content: flex-end;
align-items: flex-end;
max-width: 100%;
}
.footer-links .footer-link {
text-decoration: none;
padding: 0px 10px;
color: black;
}
.copyright {
max-width: 100%;
margin-top: 5px;
}
@media (max-width: 700px) {
header {
font-size: 1em;
}
nav {
display: flex;
flex-direction: column;
}
nav > ul {
display: flex;
flex-wrap: wrap;
}
.tromb-types {
flex-direction: column;
justify-content: center;
align-items: center;
}
.type {
width: 300px;
}
.price {
padding: 5px 0;
}
}
<div class="wrapper">
<header>
<nav class="Navbar">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
<ul class="nav-links">
<li><a href="#" class="link">Features</a></li>
<li><a href="#" class="link">How It Works</a></li>
<li><a href="#" class="link">Pricing</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Handcrafted, home-made masterpieces</h1>
<form class="email-form">
<div class="email-form">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
</div>
<div class="button-center">
<input class="sub-button" type="submit" value="GET STARTED">
</div>
</form>
</section>
<section class="bus-info">
<div class="features">
<div class="icon"><i class="fas fa-fire"></i></div>
<div class="desc">
<h2 class="feat-title">Premium materials</h2>
<p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fas fa-truck"></i></div>
<div class="desc">
<h2 class="feat-title">Fast Shipping</h2>
<p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
not satisfied.</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fa-solid fa-battery-full"></i></div>
<div class="desc">
<h2 class="feat-title">Quality Assurance</h2>
<p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
instrument.</p>
</div>
</div>
</section>
<section class="video">
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</section>
<section class="tromb-types">
<div class="type">
<h3 class="title-tromb">TENOR TROMBONE</h3>
<h2 class="price">0</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
<div class="type">
<h3 class="title-tromb">BASS TROMBONE</h3>
<h2 class="price">0</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
<div class="type">
<h3 class="title-tromb">VALVE TROMBONE</h3>
<h2 class="price">00</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
</section>
<footer>
<ul class="footer-links">
<li><a href="#" class="footer-link">Privacy</a></li>
<li><a href="#" class="footer-link">Terms</a></li>
<li><a href="#" class="footer-link">Contacts</a></li>
</ul>
<p class="copyright">Copyright 2016, Original Trombones</p>
</footer>
</div>
2。位置：固定
如果您在 body 上添加一些 padding-top，Fixed 会起作用，如下所示：
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
min-height: 100vh;
background-color: #eee;
color: black;
/* line I added*/
padding-top: 10rem;
}
.wrapper {
display: flex;
justify-content: center;
flex-direction: column;
}
/* lines I added*/
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
background: #eee;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-weight: 900;
font-size: 1em;
padding: 20px 10px;
flex-wrap: wrap;
border-bottom: 1px solid grey;
}
ul {
flex-grow: 1;
max-width: 30%;
display: flex;
justify-content: space-around;
text-decoration: none;
}
img {
display: flex;
width: 40vw;
}
ul li {
display: inline;
text-decoration: none;
display: flex;
}
.nav-links a {
text-decoration: none;
color: black;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 2em;
font-weight: 700;
padding: 20px;
}
h2 {
font-size: 1.4em;
font-weight: 700;
}
p {
font-size: 0.8em;
letter-spacing: 0.05em;
}
input[type="email"] {
padding: 5px 10px;
margin: 10px 0px;
border: solid 1px black;
width: 350px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="submit"] {
margin: 10px auto;
padding: 5px 15px;
background-color: #f1c40f;
font-weight: 900;
border: #eee solid 0px;
}
.bus-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.features {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.desc {
weight: 125px;
width: 80vw;
padding: 5px;
}
.icon {
color: #c5a00df8;
font-size: 2em;
}
.feat-title {
}
.features {
padding-top: 20px;
border: 40px 0px;
}
.video {
margin: auto;
padding: 30px 0px;
}
.tromb-types {
display: flex;
justify-content: center;
}
.type {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 50px;
margin: 20px 10px;
border: solid black 1px;
}
.title-tromb {
font-weight: 700;
font-size: 0.8em;
}
.price {
padding: 20px 0;
}
.tromb-desc {
display: flex;
flex-direction: column;
align-items: center;
}
.text {
padding-bottom: 10px;
}
footer {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 20px;
margin-right: 20px;
}
.footer-links {
display: flex;
justify-content: flex-end;
align-items: flex-end;
max-width: 100%;
}
.footer-links .footer-link {
text-decoration: none;
padding: 0px 10px;
color: black;
}
.copyright {
max-width: 100%;
margin-top: 5px;
}
@media (max-width: 700px) {
header {
font-size: 1em;
}
nav {
display: flex;
flex-direction: column;
}
nav > ul {
display: flex;
flex-wrap: wrap;
}
.tromb-types {
flex-direction: column;
justify-content: center;
align-items: center;
}
.type {
width: 300px;
}
.price {
padding: 5px 0;
}
}
<div class="wrapper">
<header>
<nav class="Navbar">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
<ul class="nav-links">
<li><a href="#" class="link">Features</a></li>
<li><a href="#" class="link">How It Works</a></li>
<li><a href="#" class="link">Pricing</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Handcrafted, home-made masterpieces</h1>
<form class="email-form">
<div class="email-form">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
</div>
<div class="button-center">
<input class="sub-button" type="submit" value="GET STARTED">
</div>
</form>
</section>
<section class="bus-info">
<div class="features">
<div class="icon"><i class="fas fa-fire"></i></div>
<div class="desc">
<h2 class="feat-title">Premium materials</h2>
<p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fas fa-truck"></i></div>
<div class="desc">
<h2 class="feat-title">Fast Shipping</h2>
<p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
not satisfied.</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fa-solid fa-battery-full"></i></div>
<div class="desc">
<h2 class="feat-title">Quality Assurance</h2>
<p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
instrument.</p>
</div>
</div>
</section>
<section class="video">
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</section>
<section class="tromb-types">
<div class="type">
<h3 class="title-tromb">TENOR TROMBONE</h3>
<h2 class="price">0</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
<div class="type">
<h3 class="title-tromb">BASS TROMBONE</h3>
<h2 class="price">0</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
<div class="type">
<h3 class="title-tromb">VALVE TROMBONE</h3>
<h2 class="price">00</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
</section>
<footer>
<ul class="footer-links">
<li><a href="#" class="footer-link">Privacy</a></li>
<li><a href="#" class="footer-link">Terms</a></li>
<li><a href="#" class="footer-link">Contacts</a></li>
</ul>
<p class="copyright">Copyright 2016, Original Trombones</p>
</footer>
</div>
大家好，我似乎无法让 navbar 保持在屏幕顶部。如果我使用 position: fixed，navbar 会保留在内容的顶部，因此您看不到它。 position: sticky 不起作用。我认为这是由于在 body 上设置了高度？很想知道如何使用 position: fixed 来实现这一点！这是代码：
<!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">
<title>Original Trombones</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/e3044c59d5.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav class="Navbar">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
alt="original trombones logo" class="nav-img">
<ul class="nav-links">
<li><a href="#" class="link">Features</a></li>
<li><a href="#" class="link">How It Works</a></li>
<li><a href="#" class="link">Pricing</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Handcrafted, home-made masterpieces</h1>
<form class="email-form">
<div class="email-form">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
</div>
<div class="button-center">
<input class="sub-button" type="submit" value="GET STARTED">
</div>
</form>
</section>
<section class="bus-info">
<div class="features">
<div class="icon"><i class="fas fa-fire"></i></div>
<div class="desc">
<h2 class="feat-title">Premium materials</h2>
<p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fas fa-truck"></i></div>
<div class="desc">
<h2 class="feat-title">Fast Shipping</h2>
<p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
not satisfied.</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fa-solid fa-battery-full"></i></div>
<div class="desc">
<h2 class="feat-title">Quality Assurance</h2>
<p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
instrument.</p>
</div>
</div>
</section>
<section class="video">
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</section>
<section class="tromb-types">
<div class="type">
<h3 class="title-tromb">TENOR TROMBONE</h3>
<h2 class="price">0</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
<div class="type">
<h3 class="title-tromb">BASS TROMBONE</h3>
<h2 class="price">0</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
<div class="type">
<h3 class="title-tromb">VALVE TROMBONE</h3>
<h2 class="price">00</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
</section>
<footer>
<ul class="footer-links">
<li><a href="#" class="footer-link">Privacy</a></li>
<li><a href="#" class="footer-link">Terms</a></li>
<li><a href="#" class="footer-link">Contacts</a></li>
</ul>
<p class="copyright">Copyright 2016, Original Trombones</p>
</footer>
</div>
</body>
</html>
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
min-height: 100vh;
background-color: #eee;
color: black;
}
.wrapper {
display: flex;
justify-content: center;
flex-direction: column;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-weight: 900;
font-size: 1em;
padding: 20px 10px;
flex-wrap: wrap;
border-bottom: 1px solid grey;
position: sticky;
}
ul {
flex-grow: 1;
max-width: 30%;
display: flex;
justify-content: space-around;
text-decoration: none;
}
img {
display: flex;
width: 40vw;
}
ul li {
display: inline;
text-decoration: none;
display: flex;
}
.nav-links a {
text-decoration: none;
color: black;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 2em;
font-weight: 700;
padding: 20px;
}
h2 {
font-size: 1.4em;
font-weight: 700;
}
p {
font-size: 0.8em;
letter-spacing: 0.05em;
}
input[type="email"] {
padding: 5px 10px;
margin: 10px 0px;
border: solid 1px black;
width: 350px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="submit"] {
margin: 10px auto;
padding: 5px 15px;
background-color: #f1c40f;
font-weight: 900;
border: #eee solid 0px;
}
.bus-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.features {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.desc {
weight: 125px;
width: 80vw;
padding: 5px;
}
.icon {
color: #c5a00df8;
font-size: 2em;
}
.feat-title {
}
.features {
padding-top: 20px;
border: 40px 0px;
}
.video {
margin: auto;
padding: 30px 0px;
}
.tromb-types {
display: flex;
justify-content: center;
}
.type {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 50px;
margin: 20px 10px;
border: solid black 1px;
}
.title-tromb {
font-weight: 700;
font-size: 0.8em;
}
.price {
padding: 20px 0;
}
.tromb-desc {
display: flex;
flex-direction: column;
align-items: center;
}
.text {
padding-bottom: 10px;
}
footer {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 20px;
margin-right: 20px;
}
.footer-links {
display: flex;
justify-content: flex-end;
align-items: flex-end;
max-width: 100%;
}
.footer-links .footer-link {
text-decoration: none;
padding: 0px 10px;
color: black;
}
.copyright {
max-width: 100%;
margin-top: 5px;
}
@media (max-width: 700px) {
header {
font-size: 1em;
}
nav {
display: flex;
flex-direction: column;
}
nav > ul {
display: flex;
flex-wrap: wrap;
}
.tromb-types {
flex-direction: column;
justify-content: center;
align-items: center;
}
.type {
width: 300px;
}
.price {
padding: 5px 0;
}
}
</style>
1。位置：粘
到目前为止最简单的方法是使用粘滞位置，但在 header 而不是 nav。因为作为元素，只要我的 parent 在屏幕上可见，我就是粘性的。由于 header 的高度不是那么大，因此 nav 上的 position:sticky 似乎不起作用。要了解有关职位 sticky 的更多信息，您可以阅读 here.
这是工作示例：
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
min-height: 100vh;
background-color: #eee;
color: black;
}
.wrapper {
display: flex;
justify-content: center;
flex-direction: column;
}
/* lines I added*/
header {
position: sticky;
top: 0;
z-index: 99;
background: #eee;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-weight: 900;
font-size: 1em;
padding: 20px 10px;
flex-wrap: wrap;
border-bottom: 1px solid grey;
}
ul {
flex-grow: 1;
max-width: 30%;
display: flex;
justify-content: space-around;
text-decoration: none;
}
img {
display: flex;
width: 40vw;
}
ul li {
display: inline;
text-decoration: none;
display: flex;
}
.nav-links a {
text-decoration: none;
color: black;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 2em;
font-weight: 700;
padding: 20px;
}
h2 {
font-size: 1.4em;
font-weight: 700;
}
p {
font-size: 0.8em;
letter-spacing: 0.05em;
}
input[type="email"] {
padding: 5px 10px;
margin: 10px 0px;
border: solid 1px black;
width: 350px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="submit"] {
margin: 10px auto;
padding: 5px 15px;
background-color: #f1c40f;
font-weight: 900;
border: #eee solid 0px;
}
.bus-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.features {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.desc {
weight: 125px;
width: 80vw;
padding: 5px;
}
.icon {
color: #c5a00df8;
font-size: 2em;
}
.feat-title {
}
.features {
padding-top: 20px;
border: 40px 0px;
}
.video {
margin: auto;
padding: 30px 0px;
}
.tromb-types {
display: flex;
justify-content: center;
}
.type {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 50px;
margin: 20px 10px;
border: solid black 1px;
}
.title-tromb {
font-weight: 700;
font-size: 0.8em;
}
.price {
padding: 20px 0;
}
.tromb-desc {
display: flex;
flex-direction: column;
align-items: center;
}
.text {
padding-bottom: 10px;
}
footer {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 20px;
margin-right: 20px;
}
.footer-links {
display: flex;
justify-content: flex-end;
align-items: flex-end;
max-width: 100%;
}
.footer-links .footer-link {
text-decoration: none;
padding: 0px 10px;
color: black;
}
.copyright {
max-width: 100%;
margin-top: 5px;
}
@media (max-width: 700px) {
header {
font-size: 1em;
}
nav {
display: flex;
flex-direction: column;
}
nav > ul {
display: flex;
flex-wrap: wrap;
}
.tromb-types {
flex-direction: column;
justify-content: center;
align-items: center;
}
.type {
width: 300px;
}
.price {
padding: 5px 0;
}
}
<div class="wrapper">
<header>
<nav class="Navbar">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
<ul class="nav-links">
<li><a href="#" class="link">Features</a></li>
<li><a href="#" class="link">How It Works</a></li>
<li><a href="#" class="link">Pricing</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Handcrafted, home-made masterpieces</h1>
<form class="email-form">
<div class="email-form">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
</div>
<div class="button-center">
<input class="sub-button" type="submit" value="GET STARTED">
</div>
</form>
</section>
<section class="bus-info">
<div class="features">
<div class="icon"><i class="fas fa-fire"></i></div>
<div class="desc">
<h2 class="feat-title">Premium materials</h2>
<p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fas fa-truck"></i></div>
<div class="desc">
<h2 class="feat-title">Fast Shipping</h2>
<p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
not satisfied.</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fa-solid fa-battery-full"></i></div>
<div class="desc">
<h2 class="feat-title">Quality Assurance</h2>
<p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
instrument.</p>
</div>
</div>
</section>
<section class="video">
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</section>
<section class="tromb-types">
<div class="type">
<h3 class="title-tromb">TENOR TROMBONE</h3>
<h2 class="price">0</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
<div class="type">
<h3 class="title-tromb">BASS TROMBONE</h3>
<h2 class="price">0</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
<div class="type">
<h3 class="title-tromb">VALVE TROMBONE</h3>
<h2 class="price">00</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
</section>
<footer>
<ul class="footer-links">
<li><a href="#" class="footer-link">Privacy</a></li>
<li><a href="#" class="footer-link">Terms</a></li>
<li><a href="#" class="footer-link">Contacts</a></li>
</ul>
<p class="copyright">Copyright 2016, Original Trombones</p>
</footer>
</div>
2。位置：固定
如果您在 body 上添加一些 padding-top，Fixed 会起作用，如下所示：
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
min-height: 100vh;
background-color: #eee;
color: black;
/* line I added*/
padding-top: 10rem;
}
.wrapper {
display: flex;
justify-content: center;
flex-direction: column;
}
/* lines I added*/
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
background: #eee;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-weight: 900;
font-size: 1em;
padding: 20px 10px;
flex-wrap: wrap;
border-bottom: 1px solid grey;
}
ul {
flex-grow: 1;
max-width: 30%;
display: flex;
justify-content: space-around;
text-decoration: none;
}
img {
display: flex;
width: 40vw;
}
ul li {
display: inline;
text-decoration: none;
display: flex;
}
.nav-links a {
text-decoration: none;
color: black;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 2em;
font-weight: 700;
padding: 20px;
}
h2 {
font-size: 1.4em;
font-weight: 700;
}
p {
font-size: 0.8em;
letter-spacing: 0.05em;
}
input[type="email"] {
padding: 5px 10px;
margin: 10px 0px;
border: solid 1px black;
width: 350px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="submit"] {
margin: 10px auto;
padding: 5px 15px;
background-color: #f1c40f;
font-weight: 900;
border: #eee solid 0px;
}
.bus-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.features {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.desc {
weight: 125px;
width: 80vw;
padding: 5px;
}
.icon {
color: #c5a00df8;
font-size: 2em;
}
.feat-title {
}
.features {
padding-top: 20px;
border: 40px 0px;
}
.video {
margin: auto;
padding: 30px 0px;
}
.tromb-types {
display: flex;
justify-content: center;
}
.type {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 50px;
margin: 20px 10px;
border: solid black 1px;
}
.title-tromb {
font-weight: 700;
font-size: 0.8em;
}
.price {
padding: 20px 0;
}
.tromb-desc {
display: flex;
flex-direction: column;
align-items: center;
}
.text {
padding-bottom: 10px;
}
footer {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 20px;
margin-right: 20px;
}
.footer-links {
display: flex;
justify-content: flex-end;
align-items: flex-end;
max-width: 100%;
}
.footer-links .footer-link {
text-decoration: none;
padding: 0px 10px;
color: black;
}
.copyright {
max-width: 100%;
margin-top: 5px;
}
@media (max-width: 700px) {
header {
font-size: 1em;
}
nav {
display: flex;
flex-direction: column;
}
nav > ul {
display: flex;
flex-wrap: wrap;
}
.tromb-types {
flex-direction: column;
justify-content: center;
align-items: center;
}
.type {
width: 300px;
}
.price {
padding: 5px 0;
}
}
<div class="wrapper">
<header>
<nav class="Navbar">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
<ul class="nav-links">
<li><a href="#" class="link">Features</a></li>
<li><a href="#" class="link">How It Works</a></li>
<li><a href="#" class="link">Pricing</a></li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Handcrafted, home-made masterpieces</h1>
<form class="email-form">
<div class="email-form">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
</div>
<div class="button-center">
<input class="sub-button" type="submit" value="GET STARTED">
</div>
</form>
</section>
<section class="bus-info">
<div class="features">
<div class="icon"><i class="fas fa-fire"></i></div>
<div class="desc">
<h2 class="feat-title">Premium materials</h2>
<p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fas fa-truck"></i></div>
<div class="desc">
<h2 class="feat-title">Fast Shipping</h2>
<p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
not satisfied.</p>
</div>
</div>
<div class="features">
<div class="icon"><i class="fa-solid fa-battery-full"></i></div>
<div class="desc">
<h2 class="feat-title">Quality Assurance</h2>
<p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
instrument.</p>
</div>
</div>
</section>
<section class="video">
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</section>
<section class="tromb-types">
<div class="type">
<h3 class="title-tromb">TENOR TROMBONE</h3>
<h2 class="price">0</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
<div class="type">
<h3 class="title-tromb">BASS TROMBONE</h3>
<h2 class="price">0</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
<div class="type">
<h3 class="title-tromb">VALVE TROMBONE</h3>
<h2 class="price">00</h2>
<div class="tromb-desc">
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum.</p>
<p class="text">Lorem ipsum dolor.</p>
<p class="text">Lorem ipsum.</p>
</div>
<div class="select-button">
<input class="sub-button" type="submit" value="SELECT">
</div>
</div>
</section>
<footer>
<ul class="footer-links">
<li><a href="#" class="footer-link">Privacy</a></li>
<li><a href="#" class="footer-link">Terms</a></li>
<li><a href="#" class="footer-link">Contacts</a></li>
</ul>
<p class="copyright">Copyright 2016, Original Trombones</p>
</footer>
</div>