body {
background-color:olive;
margin:0;
}
nav {
background-color:aqua;
}
#container{
max-height:1800px;
display:flex;
flex-direction:row;
position:sticky;
}
a {
background-color:chocolate;
padding:7px;
border-radius:10px;
text-decoration:none;
}
#container > a:hover{
opacity:0.5;
}
#item-2, #item-3, #item-1, #item-0 {
align-self:flex-start;
margin-top:5px;
}
#logout {
align-self:flex-end;
}
}
/* nav is finally done after 1.5 hours lol and another 30mins */
#bear-nest {
display:flex;
flex-direction:row;
justify-content:flex-end;
align-items:center;
}
img {
border-radius:20%;
display: block;
margin-left: auto;
margin-right: auto;}
#bear > p {
text-align:center;
margin-left:auto;
margin-right:auto;
width:70%;
}
hr {
border: 1px solid black;
}
.middle {
display:flex;
justify-content:center;
align-self:flex-start;
}
}<body>
<nav>
<div id="main-content">
<div id="container" >
<a id="main" class="bonus" href="#">Main</a>
<a id="information" class="bonus" href="information.html">Information</a>
<a id="contacts" class="bonus" href="contacts.html">Contacts</a>
<a id="media" class="bonus" href="media.html">Media</a>
<a id="logout" href="logout.html">Log out</a>
</div>
</div>
</nav>
<main>
<div id="bear-nest">
<div id="american-bear-nest">
<div class="middle">
<p>The American black bear</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/01_Schwarzb%C3%A4r.jpg/220px-01_Schwarzb%C3%A4r.jpg" alt="bear" title="The American black bear">
<div id="bear"><p>The American black bear (Ursus americanus) is a medium-sized bear native to North America. It is the continent's smallest and most widely distributed bear species. Black bears are omnivores, with their diets varying greatly depending on season and location. They typically live in largely forested areas, but do leave forests in search of food. Sometimes they become attracted to human communities because of the immediate availability of food. The American black bear is the world's most common bear species.
It is listed by the International Union for Conservation of Nature (IUCN) as a least-concern species, due to its widespread distribution and a large population estimated to be twice that of all other bear species combined. Along with the brown bear, it is one of only two of the eight modern bear species not considered globally threatened with extinction by the IUCN. American black bears often mark trees using their teeth and claws as a form of communication with other bears, a behavior common to many species of bears.</p><hr></div>
<div class="middle">
<p>Asian black bear</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/220px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG" alt="asian bear" title="Asian black bear">
<div id="bear"><p>The Asian black bear (Ursus thibetanus, previously known as Selenarctos thibetanus), also known as the moon bear and the white-chested bear, is a medium-sized bear species native to Asia and largely adapted to arboreal life.[2][3] It lives in the Himalayas, in the northern parts of the Indian subcontinent, Korea, northeastern China, the Russian Far East, the Honshū and Shikoku islands of Japan, and Taiwan. It is classified as vulnerable by the International Union for Conservation of Nature (IUCN), mostly because of deforestation and hunting for its body parts.[1]
The species is morphologically very similar to some prehistoric bears, and is thought by some scientists to be the ancestor of other extant bear species (aside from pandas and spectacled bears).[2] Though largely herbivorous, Asian black bears can be very aggressive toward humans, who frequently trap or kill them for traditional medicine.[4] </p></div>
</div>
</div>
</main>
</body>
你好，目前我正在尝试使导航栏变粘，因为我开始向下滚动。但是，无论我做什么，它似乎都不起作用。到目前为止，我已经尝试将其应用于代码，因为我真的认为它可以工作。我还尝试将其应用于＃main-content和#content，但实际上它们似乎都不起作用。任何解释都会有用
答案 0 :(得分：2)
如果您想让navbar保持粘性，请对position:sticky施加nav，而不要对#container施加。您还需要指定一个top职位。就您而言，top:0
在此处详细了解position:sticky
请参见下面的代码段
body {
background-color:olive;
margin:0;
}
nav {
background-color:aqua;
position:sticky;
top:0px;
}
#container{
max-height:1800px;
display:flex;
flex-direction:row;
}
a {
background-color:chocolate;
padding:7px;
border-radius:10px;
text-decoration:none;
}
#container > a:hover{
opacity:0.5;
}
#item-2, #item-3, #item-1, #item-0 {
align-self:flex-start;
margin-top:5px;
}
#logout {
align-self:flex-end;
}
}
/* nav is finally done after 1.5 hours lol and another 30mins */
#bear-nest {
display:flex;
flex-direction:row;
justify-content:flex-end;
align-items:center;
}
img {
border-radius:20%;
display: block;
margin-left: auto;
margin-right: auto;}
#bear > p {
text-align:center;
margin-left:auto;
margin-right:auto;
width:70%;
}
hr {
border: 1px solid black;
}
.middle {
display:flex;
justify-content:center;
align-self:flex-start;
}
}<body>
<nav>
<div id="main-content">
<div id="container" >
<a id="main" class="bonus" href="#">Main</a>
<a id="information" class="bonus" href="information.html">Information</a>
<a id="contacts" class="bonus" href="contacts.html">Contacts</a>
<a id="media" class="bonus" href="media.html">Media</a>
<a id="logout" href="logout.html">Log out</a>
</div>
</div>
</nav>
<main>
<div id="bear-nest">
<div id="american-bear-nest">
<div class="middle">
<p>The American black bear</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/01_Schwarzb%C3%A4r.jpg/220px-01_Schwarzb%C3%A4r.jpg" alt="bear" title="The American black bear">
<div id="bear"><p>The American black bear (Ursus americanus) is a medium-sized bear native to North America. It is the continent's smallest and most widely distributed bear species. Black bears are omnivores, with their diets varying greatly depending on season and location. They typically live in largely forested areas, but do leave forests in search of food. Sometimes they become attracted to human communities because of the immediate availability of food. The American black bear is the world's most common bear species.
It is listed by the International Union for Conservation of Nature (IUCN) as a least-concern species, due to its widespread distribution and a large population estimated to be twice that of all other bear species combined. Along with the brown bear, it is one of only two of the eight modern bear species not considered globally threatened with extinction by the IUCN. American black bears often mark trees using their teeth and claws as a form of communication with other bears, a behavior common to many species of bears.</p><hr></div>
<div class="middle">
<p>Asian black bear</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/220px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG" alt="asian bear" title="Asian black bear">
<div id="bear"><p>The Asian black bear (Ursus thibetanus, previously known as Selenarctos thibetanus), also known as the moon bear and the white-chested bear, is a medium-sized bear species native to Asia and largely adapted to arboreal life.[2][3] It lives in the Himalayas, in the northern parts of the Indian subcontinent, Korea, northeastern China, the Russian Far East, the Honshū and Shikoku islands of Japan, and Taiwan. It is classified as vulnerable by the International Union for Conservation of Nature (IUCN), mostly because of deforestation and hunting for its body parts.[1]
The species is morphologically very similar to some prehistoric bears, and is thought by some scientists to be the ancestor of other extant bear species (aside from pandas and spectacled bears).[2] Though largely herbivorous, Asian black bears can be very aggressive toward humans, who frequently trap or kill them for traditional medicine.[4] </p></div>
</div>
</div>
</main>
</body>
注意：您还可以在position:fixed上使用nav，但是应在margin-top上添加等于#container高度的nav。
nav {
position:fixed;
top:0;
width:100%;
}
#container {
margin-top:100px;/* nav height */
}
注意2：请格式化CSS（您可以找到相应的在线工具）
答案 1 :(得分：0)
如果我理解正确，则应将其应用于nav而不是#container div。
body {
background-color: olive;
margin: 0;
}
nav {
background-color: aqua;
position: sticky;
top: 0;
}
#container {
max-height: 1800px;
display: flex;
flex-direction: row;
}
a {
background-color: chocolate;
padding: 7px;
border-radius: 10px;
text-decoration: none;
}
#container>a:hover {
opacity: 0.5;
}
#item-2,
#item-3,
#item-1,
#item-0 {
align-self: flex-start;
margin-top: 5px;
}
#logout {
align-self: flex-end;
}
}
/* nav is finally done after 1.5 hours lol and another 30mins */
#bear-nest {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
img {
border-radius: 20%;
display: block;
margin-left: auto;
margin-right: auto;
}
#bear>p {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 70%;
}
hr {
border: 1px solid black;
}
.middle {
display: flex;
justify-content: center;
align-self: flex-start;
}
}<body>
<nav>
<div id="main-content">
<div id="container">
<a id="main" class="bonus" href="#">Main</a>
<a id="information" class="bonus" href="information.html">Information</a>
<a id="contacts" class="bonus" href="contacts.html">Contacts</a>
<a id="media" class="bonus" href="media.html">Media</a>
<a id="logout" href="logout.html">Log out</a>
</div>
</div>
</nav>
<main>
<div id="bear-nest">
<div id="american-bear-nest">
<div class="middle">
<p>The American black bear</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/01_Schwarzb%C3%A4r.jpg/220px-01_Schwarzb%C3%A4r.jpg" alt="bear" title="The American black bear">
<div id="bear">
<p>The American black bear (Ursus americanus) is a medium-sized bear native to North America. It is the continent's smallest and most widely distributed bear species. Black bears are omnivores, with their diets varying greatly depending on season
and location. They typically live in largely forested areas, but do leave forests in search of food. Sometimes they become attracted to human communities because of the immediate availability of food. The American black bear is the world's
most common bear species. It is listed by the International Union for Conservation of Nature (IUCN) as a least-concern species, due to its widespread distribution and a large population estimated to be twice that of all other bear species
combined. Along with the brown bear, it is one of only two of the eight modern bear species not considered globally threatened with extinction by the IUCN. American black bears often mark trees using their teeth and claws as a form of communication
with other bears, a behavior common to many species of bears.</p>
<hr>
</div>
<div class="middle">
<p>Asian black bear</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/220px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG" alt="asian bear" title="Asian black bear">
<div id="bear">
<p>The Asian black bear (Ursus thibetanus, previously known as Selenarctos thibetanus), also known as the moon bear and the white-chested bear, is a medium-sized bear species native to Asia and largely adapted to arboreal life.[2][3] It lives in
the Himalayas, in the northern parts of the Indian subcontinent, Korea, northeastern China, the Russian Far East, the Honshū and Shikoku islands of Japan, and Taiwan. It is classified as vulnerable by the International Union for Conservation
of Nature (IUCN), mostly because of deforestation and hunting for its body parts.[1] The species is morphologically very similar to some prehistoric bears, and is thought by some scientists to be the ancestor of other extant bear species (aside
from pandas and spectacled bears).[2] Though largely herbivorous, Asian black bears can be very aggressive toward humans, who frequently trap or kill them for traditional medicine.[4] </p>
</div>
</div>
</div>
</main>
</body>
答案 2 :(得分：0)
将position:sticky移至nav元素并添加属性top:0。
粘性元素需要一个top属性才能工作。另外，如果父容器的高度与sticky元素的高度相同，那么您将看不到效果（因此，将其移动到nav元素）-粘性元素需要比父容器短，这样它才可以“滑动” '。