本文主要为大家详细介绍了基于jquery实现定位导航位置效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
当滚动条滚动到内容区域的时候，侧边导航条定位到屏幕，不再动，并且点击导航条跳转到内容所在的位置；
nbsp;html> *{ padding: 0; margin: 0; } .left{ float: left; padding: 0 0 328px 0; } .left p{ width: 800px; height: 300px; line-height: 300px; text-align: center; font-size: 30px; background: gray; margin: 10px 0; } .nav{ position: absolute; right:20px; top: 20px; } .nav p{ width: 100px; height: 80px; line-height: 80px; text-align: center; background: pink; margin: 10px 0; cursor: pointer; } .bottom{ overflow: hidden; width: 100%; position: relative; } Document ![jQuery实现定位导航位置详解]()
![jQuery实现定位导航位置详解]()
一
二
三
四
one
two
three
four
$(window).scroll(function(e){ console.log($(window).scrollTop()); if ($(window).scrollTop() >$('#one').offset().top) { $('.nav').css({'position':'fixed'}); console.log('ss'); } else{ $('.nav').css({'position':'absolute'}); } }) $('.nav p').click(function(){ var i = $('.navp').index(this); var x = $('.leftp').eq(i).offset().top; $('html, body').animate({scrollTop:x+'px'},500); })
登录后复制
相关推荐：
关于jQuery实现定位导航效果
Fullpage.js固定导航栏-实现定位导航栏_javascript技巧
Bootstrap实现导航条实例详解
以上就是jQuery实现定位导航位置详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2790691.html
