CSS3 - 置顶位置不起作用

Question

我正在尝试在标题部分创建导航菜单与粘定位，但我不能得到它的工作，我在这里的CSS代码：

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; 
    } 

我不现在的错误，但我只是打算创建页眉和导航，导航低于页眉，并将坚持顶部，即使我向下滚动。

注意：导航类是“粘性”。

Answer 1

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