您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍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 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);
jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
以上是“jquery如何实现吸顶导航效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。