I am trying to make a div position: sticky; but it doesn’t work, here’s my code:
body {
height: 1000px;
}
header {
position: absolute;
width: 100%;
z-index: 100;
}
.top-navbar {
height: 100px;
background-color: green;
}
nav {
position: -webkit-sticky !important;
position: sticky;
top: 0;
align-self: flex-start;
background-color: orange;
}<header>
<div class="top-navbar">
<h2>top navbar</h2>
</div>
<nav>
<h1>My navbar</h1>
</nav>
</header>>Solution :
it seems you only want to keep the nav visible on scroll. In this case do it like below. Move sticky to header and consider a negative value for top equal to the height of top-navbar
body {
height: 1000px;
}
header {
position: sticky;
top: -100px;
}
.top-navbar {
height: 100px;
background-color: green;
}
nav {
background-color: orange;
}
h1,h2 {
margin:0;
}<header>
<div class="top-navbar">
<h2>top navbar</h2>
</div>
<nav>
<h1>My navbar</h1>
</nav>
</header>