这篇文章主要介绍jquery如何实现吸顶导航效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
专注于为中小企业提供网站设计制作、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业海晏免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
本文实例为大家分享了jquery实现吸顶导航效果的具体代码，供大家参考，具体内容如下
css:
*{margin:0;padding:0;}
body{
margin:0 auto;
max-width:10rem;
}
header{
width:10rem;
height:1rem;
background:red;
position:fixed;
top:0;
left:auto;
}
section{
height:100%;
overflow: auto;
padding:1rem 0;
}
.bananers{
width:100%;
height:3rem;
text-align: center;
line-height:3rem;
background: aqua;
}
.mains{
width:100%;
height:1rem;
background:red;
display: flex;
}
.mains>div{
width:100%;
height:100%;
border:1px solid #dddddd;
display: flex;
align-items: center;
justify-content: center;
}
.contents{
width:100%;
}
.contents>div{
height:50px;
line-height:50px;
padding-left:10%;
border-bottom:1px solid red;
}
footer{
width:10rem;
height:1rem;
background: #0086B3;
position:fixed;
left:auto;
bottom:0;
}
.fixed-top {
position: fixed;
width: 100%;
top:1rem;
left:auto;
}
.sticky {
position: -webkit-sticky;/*滚过初始位置时自动吸顶*/
position: sticky;/*吸顶时的定位*/
top:1rem;
left:auto;
z-index: 999;/*z-index比下方所有层级要高*/
}html：
