Why does the sticky position of the header not work when I scroll more than 100% height?
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html,
body {
height: 100%;
width: 100%;
}
/* -------------------- Headers -------------------- */
.social-menu {
display: none;
}
header {
top: 0;
position: -webkit-sticky;
position: sticky;
display: flex;
justify-content: center;
}
header nav {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
max-width: 1100px;
width: 100%;
}
#nav-check {
display: none;
}
#nav-check:checked~ul {
display: grid;
}
header nav ul {
display: none;
}
/* -------------------- Hero -------------------- */
.hero {
height: auto;
}
/* -------------------- Noticias -------------------- */
/* -------------------- Patrocinadores -------------------- */
@media (min-width: 600px) {
/* -------------------- Headers -------------------- */
header nav label {
display: none;
}
#nav-check:checked~ul {
display: flex;
}
.social-menu-father {
display: flex;
justify-content: center;
}
.social-menu {
display: grid;
grid-template-columns: 1fr 1fr;
height: 46px;
align-items: center;
padding: 0 40px;
max-width: 1100px;
width: 100%;
}
.social-menu div {
display: flex;
justify-content: flex-end;
}
header nav {
height: 80px;
}
header nav ul {
display: flex;
justify-content: space-between;
}
/* -------------------- Hero -------------------- */
.hero {
height: calc(100% - 126px);
}
/* -------------------- Noticias -------------------- */
/* -------------------- Patrocinadores -------------------- */
} <div class="social-menu-father">
<div class="social-menu">
<a href="">Twitch online</a>
<div>
<a href="">a</a>
<a href="">a</a>
<a href="">a</a>
<a href="">a</a>
</div>
</div>
</div>
<header>
<nav>
<a href=""><img src="https://i.pinimg.com/originals/08/b5/07/08b5070ece24d17eea517ba0e2b188b4.png" width="50px"></a>
<input type="checkbox" id="nav-check">
<label for="nav-check">asd</label>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Noticias</a></li>
<li><a href="">Equipos</a></li>
<li><a href="">Patrocinadores</a></li>
<li><a href="">Club</a></li>
</ul>
</nav>
</header>
<div class="hero">
asd
</div>
<div>
<p>a</p>
</div>