我的导航栏"position sticky"已停止工作，我不知道为什么

Question

所以我在大约 2 个月的经验中仍然相当新。然而，我有一个坏习惯，就是跳到下一个主题而不练习，只是假设我会保留它，导致我在尝试开始一个项目时要么忘记，要么挣扎。所以我试图打破这个习惯，这样我就可以掌握它，这让我想到了我的问题。我的粘性导航"粘住"时遇到问题。

.HTML

<div class="header">
<div class = "intro">
<h2 class = "introduction">Hello, I'm <br></h2>
</div>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="container">
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
</div>

.CSS

body{
margin: 0;
padding: 0;
font-family: 'Ubuntu', sans-serif;
background-color: #393c42;
}
.container {
margin: auto;
max-width: 900px;
}
.header{
min-height: 900px;
background-color: #393c42;
padding: 0;
margin: 0;
}
.intro {
}
.introduction {
font-size: 50px;
text-align: center;
padding-top: 400px;
font-family: 'Permanent Marker',sans-serif;
color: #6bd3e5;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #6bd3e5;
}
h2 {
padding: 0;
margin: 0;
}
.projectSquares {
width: 40%;
background: #333;
padding-bottom: 30%;
float:left;
margin: 1%;
}

基本上我正在尝试使用位置：粘性，但它已停止工作。在我把所有的 .projectSquaresdiv 放进去后似乎停止了工作，但我看不出如何。我认为有些东西与它冲突，但我无法弄清楚。任何帮助将不胜感激，如果我的代码没有任何意义，我深表歉意。

此外，如果有一种更简单的方法来获取效果下的横幅图像/粘性导航，那么任何指针都会很棒。

Answer 1

position: sticky要记住的重要一点是，在您滚动超过某个点之前，它被视为相对定位的元素。由于其(初始(相对定位，容器方块基本上从父.container继承其高度，父没有定义高度。

您可以为父.container指定一个定义的height，也可以overflow: hidden。

将overflow: hidden应用于.container可以解决此问题，如下所示：

body {
margin: 0;
padding: 0;
font-family: 'Ubuntu', sans-serif;
background-color: #393c42;
}
.container {
margin: auto;
max-width: 900px;
overflow: hidden;
}
.header {
min-height: 900px;
background-color: #393c42;
padding: 0;
margin: 0;
}
.intro {}
.introduction {
font-size: 50px;
text-align: center;
padding-top: 400px;
font-family: 'Permanent Marker', sans-serif;
color: #6bd3e5;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #6bd3e5;
}
h2 {
padding: 0;
margin: 0;
}
.projectSquares {
width: 40%;
background: #333;
padding-bottom: 30%;
float: left;
margin: 1%;
}

<div class="header">
<div class="intro">
<h2 class="introduction">Hello, I'm <br></h2>
</div>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="container">
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
<div class="projectSquares"></div>
</div>

Answer 2

试着放！在css 代码旁边很重要。 在您的情况下，请尝试位置：粘性！