这篇文章主要为大家详细介绍了jquery实现吸顶导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>内容</div> <div> <div>导航1</div> <div>导航2</div> <div>导航3</div> </div> <div></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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: