关于jQuery实现定位导航效果

来源：测品娱乐

本文主要为大家详细介绍了基于jQuery实现定位导航位置效果，并分享了Android九宫格图片展示的具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

当滚动条滚动到内容区域的时候，侧边导航条定位到屏幕，不再动，并且点击导航条跳转到内容所在的位置；

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <style>
 *{
 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;
 }
 </style>
 <title>Document</title>
</head>
<body>
 <img style="width:100%" src="o_1bsmo1kpn1hp61bm0176i1bk618uo9.jpg" alt="">
 <p class="bottom">
 <p class="left">
 <p class="one leftp" id="one">
 一
 </p>
 <p class="conOne leftp" id="two">
 二 
 </p>
 <p class="leftp" id="three ">
 三
 </p>
 <p class="leftp" id="four">
 四
 </p>
 </p>
 <p class="nav">
 <p class="one navp">one</p>
 <p class="two navp">two</p>
 <p class="three navp">three</p>
 <p class="four navp">four</p>
 </p>
 </p>
 <script src="jquery.js"></script>
 <script>
 $(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);
 })
 </script>
</body>
</html>