jquery实现吸顶导航效果

本文实例为大家分享了jquery实现吸顶导航效果的具体代码，供大家参考，具体内容如下css:*{

本文实例为大家分享了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：

<header>头部</header>
<section>
 <div class="bananers">内容</div>
 <div class="mains">
 <div>导航1</div>
 <div>导航2</div>
 <div>导航3</div>
 </div>
 <div class="contents"></div>
</section>
<footer>页脚</footer>

js：

for(var i=0;i<20;i++){
 $(".contents").append(`<div>${i+1}</div>`)
 }
 var headers=$("header")[0].getBoundingClientRect().height;
 var mains=$(".mains").offset().top;
 var heights=mains-headers;
 $(".bananers").html(mains+"----"+headers);
 var tops = document.querySelector('.mains');
 function fixed(num) {
 var nys= navigator.userAgent;
 var isAndroid = nys.indexOf('Android') > -1 || nys.indexOf('Adr') > -1; 
 var isIOS = !!nys.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
 if(isAndroid) {
 document.body.onscroll = function(e) {
 var scrollT = document.body.scrollTop;
 if (scrollT > num) {
 $(tops).addClass('fixed-top');
 }else {
 $(tops).removeClass('fixed-top');
 }
 };
 }else if(isIOS) {
 $(tops).addClass('sticky');
 }
 }
fixed(heights);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。