代码展示：

HTML代码

<ul class="menu">
    <li><a href="#">IM即时通讯云</a></li>
    <li><a href="#">在线客服</a></li>
    <li><a href="#">短信验证码</a></li>
    <li><a href="#">客服机器人</a></li>
    <li><a href="#">价格/费用</a></li>
    <li><a href="#">demo体验</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

CSS代码

/* 初始化的样式 */
*{
    margin:0px;
    padding:0px;
    font-family:微软雅黑;
}
html,body{
    width: 100%;
    height: 150%;
}
a{
    color:#333;
    text-decoration: none;
}
ul,li,ol{
    list-style: none;
}
img{
    border:0px;   /*处理兼容   给图片标签加上超链接的时候，在ie浏览器中会有一个蓝色边框*/
}
/* 导航样式 */
.menu{
    width: 80%;
    height: 45px;
    background-color: rgba(255,0,0,0.5);
    margin:0 auto;
    margin-top:120px;
}
.menu li{
    float: left;
    width: 14.1%;
    text-align: center;
    line-height: 45px;
}

js代码

<script>
    $(function(){
        // 谁(window)触发滚动事件(scroll)  
        $(window).scroll(function(){
            // 当滚动条的滚动距离等于了导航距离顶端的值，让导航固定在顶端
            // 如何获取滚动距离 scrollTop()
            var top = $(this).scrollTop()
            if(top >= 120){
                // 让导航固定在顶端,使用固定定位
                $('.menu').css({'position':'fixed','top':'0px','margin-top':'0px','left':'10%'})
                }else{
                    $('.menu').css({'position':'static','margin-top':'120px'})
                }
                console.log(top);
        })
    })
</script>