CSS3 - Sticky position not work - html

Question

i'm try to create navigation menu under header section with sticky positioning but i can't get it work, here my css code :
body{
}
header{
position: relative;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: whitesmoke;
text-align: left;
float: left;
padding: 5px;
z-index:100;
}
#logo{
position: relative;
height: 85px;
width: 120px;
/*border: 1px solid black;*/
float: left;
background-image: url('logoArdi.svg');
background-position: center;
background-size: contain;
}
#judulWeb{
position: relative;
height: 85px;
width: 200px;
text-align: center;
float: left;
}
#kontak{
position: inherit;
float: right;
height: 100px;
top: 20px;
right: 10px;
}
.imghead{
margin: auto 5px auto auto;
}
.sticky{
position: sticky;
position: -webkit-sticky;
position: -o-sticky;
top: 0px;
float: left;
width: 100%;
height:30px;
background-color: #26282b;
text-align: center;
box-shadow: 0px 2px 10px #26282b;
}
ul li{
position:relative;
bottom:11px;
display: inline-block;
margin: auto 30px auto auto;
}
ul li{
color:whitesmoke;
/*background-color:black;
border-radius: 5px 5px 0px 0px;
padding: 5px;*/
}
ul li:hover{
color:#26282b;
background-color: whitesmoke ;
}
#kontak{
position: inherit;
float: right;
height: 100px;
}
#wrapper{
position: relative;
top: 132px;
width: 80%;
float: left;
margin-right: 10%;
margin-left: 10%;
text-align: center;
background-color: transparent;
}
.imgutama{
width: 200px;
}
i don't now the mistake, but i just intend to create page header and navigation, the navigation is below the page header and will stick on top even i scroll down.
note : navigation class is "sticky".

Answer 1

#sidebar {
position: -webkit-sticky; // required for Safari
position: sticky;
top: 0; // required as well.
}