jquery如何实现吸顶导航效果

这篇文章主要介绍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：

头部

  内容