html部分

<body>
<h1>1</h1>
<h1>2</h1>
<h1>1</h1>
<h1>2</h1>
<div class="top">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>

</body>

css部分

<style>
 
        .top{
            width:100%;
            height:50px;
            background:green;

        }
        .top ul li{
            list-style:none;
            display:inline-block;
            margin-right:100px;
            line-height:50px;
        }
        a{
            color:gray;
            text-decoration:none;
        }
/*动态使用 */
        .navbar-fixed-top{
           position:fixed;
            top:0;
            left:0;
        }
    </style>

js

<script>
    $(function(){
        var banOffTop=$(".top").offset().top;//获取到距离顶部的垂直距离
        var scTop=0;//初始化垂直滚动的距离
        $(document).scroll(function(){
            scTop=$(this).scrollTop();//获取到滚动条拉动的距离
            console.log(scTop);//查看滚动时，垂直方向上，滚动条滚动的距离
            if(scTop>=banOffTop){
            //核心部分：当滚动条拉动的距离大于等于导航栏距离顶部的距离时，添加指定的样式
                $(".top").addClass("navbar-fixed-top");
            }else{
                $(".top").removeClass("navbar-fixed-top");
            }

        })
    })
</script>

注意：如果css中设置的height:100%，则这个滚动无效果