基于jQuery实现定位导航位置效果

2020-11-27 来源：华佗健康网

本文实例为大家分享了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 div{
 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 div{
 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="">
 <div class="bottom">
 <div class="left">
 <div class="one leftDiv" id="one">
 一
 </div>
 <div class="conOne leftDiv" id="two">
 二 
 </div>
 <div class="leftDiv" id="three ">
 三
 </div>
 <div class="leftDiv" id="four">
 四
 </div>
 </div>
 <div class="nav">
 <div class="one navDiv">one</div>
 <div class="two navDiv">two</div>
 <div class="three navDiv">three</div>
 <div class="four navDiv">four</div>
 </div>
 </div>
 <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 div').click(function(){
 var i = $('.navDiv').index(this);
 var x = $('.leftDiv').eq(i).offset().top;
 $('html, body').animate({scrollTop:x+'px'},500);
 })
 </script>
</body>
</html>

显示全文

全部频道

基于jQuery实现定位导航位置效果