SOURCE

<!--
    本节实现内容：
    是滚动条滚动，当导航条到达网页顶端时，使得它便固定在那个位置上。
-->
<!--
    粘滞定位
        它的兼容性很差，甚至不支持IE。
        当把元素的 position 属性设置为 sticky 时，就开启了元素的粘滞定位。
      特点：
        粘滞定位和相对定位的特点基本一致，
        不同的是粘滞定位可以在元素到达某个位置时将其固定。
-->
<ul class="nav">
    <li>
        <a href="#">HTML/CSS</a>
    </li>
    <li>
        <a href="#">Browser Side</a>
    </li>
    <li>
        <a href="#">Server Side</a>
    </li>
    <li>
    <a href="#">Programming</a>
    </li>
    <li>
    <a href="#">XML</a>
    </li>
    <li>
    <a href="#">Web Building</a>
    </li>
    <li>
    <a href="#">Reference</a>
    </li>
</ul>

body{
    height: 3000px;
}
/*设置nav的大小*/
.nav{
    /*设置宽度和高度*/
    width:1210px;
    height:48px;
    background-color:aqua;
    margin:100px auto;
    position: sticky;
    top: 0;
}

/*设置nav中li*/
.nav li{
    /*设置li向左浮动，已使菜单横向排列*/
    float:left;
    /*设置1i的高度*/
    /*height: 48px;*/
    /*将文字在父元素中垂直居中*/
    line-height:48px;
}

/*设置a的样式*/
.nav a{
    /*将a转换为块元素*/
    display: block;
    /*去除下划线*/
    text-decoration: none;
    color:#777777;
    font-size:18px;
    padding: 0 39px;
}

.nav li:last-child a{
    padding: 0 42px 0 41px;
}

/*设置鼠标移入的效果*/
.nav a:hover{
    background-color:#3F3F3F;
    color:#E8E7E3;
}