侧边导航

HTML代码：

<div class="content">
		<p>悬赏金</p>
		<img src="http://imgsrc.baidu.com/forum/pic/item/8ce23bc79f3df8dc20386c84cd11728b47102848.jpg">
		<img src="http://imgsrc.baidu.com/forum/pic/item/373e49540923dd54a108227dd109b3de9c82485e.jpg">
		<img src="http://imgsrc.baidu.com/forum/pic/item/707994eef01f3a29c6c250db9925bc315c607c4f.jpg">
		<img src="http://imgsrc.baidu.com/forum/pic/item/2c3b0924ab18972be14e85dfe6cd7b899e510a58.jpg">
		<img src="http://imgsrc.baidu.com/forum/pic/item/922b1d950a7b02080cbebaf462d9f2d3572cc85a.jpg">
		<div class="nav">
			<p class="actv">路飞</p>
			<p>索罗</p>
			<p>罗宾</p>
			<p>娜美</p>
			<p>乌索普</p>
		</div>
	</div>

CSS代码：

 *{margin:0;padding:0;}
		.content{max-width: 750px;min-width:320px;margin:0 auto;}
		p{font-size: 42px;text-align: center;line-height: 100px;}
	    .content img{width:100%;}
	    .nav{position: fixed;top:20%;right: 10%;}
	    .nav p{border:1px solid red;background-color: yellow;}
	    .nav .actv{background-color: blue;}

五张图片依次竖直排列，现在用JS实现当浏览器窗口滑到那张图片，右边导航相应名字的背景颜色变化和点击每个名字将浏览器窗口切换到相应图片。

js代码：

	<script type="text/javascript">
		$(function(){
				
				var lufei=$('img').eq(0).offset().top;//获取路飞图片高度
				var suoluo=$('img').eq(1).offset().top;//获取佐罗图片高度
				var luobin=$('img').eq(2).offset().top;//获取罗宾图片高度
				var namei=$('img').eq(3).offset().top;//获取娜美图片高度
				var wusuopu=$('img').eq(4).offset().top;//获取乌索普图片高度
				// 导航栏点击事件
				function goWhere(who,where){
		            who.on('click',function(){
		                $('body,html').animate({scrollTop:where},1000);
		            });
                }
                // 切换样式
                function goWhat(who){
                	who.addClass('actv').siblings('p').removeClass('actv');
                }
                //获取滚动条高度并未相应导航添加样式
                function scoll(){
                	var dTop=$(document).scrollTop()+30;
				    if(dTop<suoluo){
				    	goWhat($('.nav>p:eq(0)'));
				    }else if(dTop<luobin){
				    	goWhat($('.nav>p:eq(1)'));
				    }else if(dTop<namei){
				    	goWhat($('.nav>p:eq(2)'));
				    }else if(dTop<wusuopu){
				    	goWhat($('.nav>p:eq(3)'));
				    }else{
				    	goWhat($('.nav>p:eq(4)'));
				    }       
                }
                //初始化
                scoll();
              //开始监听滚动条
			$(document).scroll(function(){
				   scoll();     	
			});
			goWhere($('.nav>p:eq(0)'),lufei);
			goWhere($('.nav>p:eq(1)'),suoluo);
			goWhere($('.nav>p:eq(2)'),luobin);
			goWhere($('.nav>p:eq(3)'),namei);
			goWhere($('.nav>p:eq(4)'),wusuopu);
		})
	</script>

js逻辑优化：

	<script type="text/javascript">
		$(function(){
				// 导航栏点击事件
				function goWhere(n,m){
		           $('.nav>p').eq(n).on('click',function(){
		                $('body,html').animate({scrollTop:$('img').eq(m).offset().top},1000);
		            });
                }
                // 切换样式
                function goWhat(n){
                	$('.nav>p').eq(n).addClass('actv').siblings('p').removeClass('actv');
                }
                
                function scoll(){
                	var dTop=$(document).scrollTop()+30;
                	var cur=0;
                	for(var i=0;i<4;i++){
                		if(dTop<$('img').eq(i+1).offset().top){
                             cur=i;
                             break;
                		}else{
                             cur=i;
                		}
                	}
                	goWhat(i);      
                }
                //初始化
                scoll();
              //开始监听滚动条
			$(document).scroll(function(){
				   scoll();     	
			});
			for(var i=0;i<5;i++){
				goWhere(i,i);
			}
		})
	</script>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    *{margin:0;padding:0;}
		.content{max-width: 650px;min-width:320px;margin:0 auto;}
		p{font-size: 42px;text-align: center;line-height: 100px;}
	    .content img{width:100%;}
	    .nav{position: fixed;top:20%;right: 10%;}
	    .nav p{border:1px solid red;background-color: yellow;}
	    .nav .actv{background-color: blue;}
	</style>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
	<div class="content">
		<p>悬赏金</p>
		<div>
			<img src="http://imgsrc.baidu.com/forum/pic/item/8ce23bc79f3df8dc20386c84cd11728b47102848.jpg">
			<img src="http://imgsrc.baidu.com/forum/pic/item/373e49540923dd54a108227dd109b3de9c82485e.jpg">
			<img src="http://imgsrc.baidu.com/forum/pic/item/707994eef01f3a29c6c250db9925bc315c607c4f.jpg">
			<img src="http://imgsrc.baidu.com/forum/pic/item/2c3b0924ab18972be14e85dfe6cd7b899e510a58.jpg">
			<img src="http://imgsrc.baidu.com/forum/pic/item/922b1d950a7b02080cbebaf462d9f2d3572cc85a.jpg">
		</div>
		<div class="nav">
			<p class="actv">路飞</p>
			<p>索罗</p>
			<p>罗宾</p>
			<p>娜美</p>
			<p>乌索普</p>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
				// 导航栏点击事件
				function goWhere(n,m){
		           $('.nav>p').eq(n).on('click',function(){
		                $('body,html').animate({scrollTop:$('img').eq(m).offset().top},1000);
		            });
                }
                // 切换样式
                function goWhat(n){
                	$('.nav>p').eq(n).addClass('actv').siblings('p').removeClass('actv');
                }
                
                function scoll(){
                	var dTop=$(document).scrollTop()+30;
                	var cur=0;
                	for(var i=0;i<4;i++){
                		if(dTop<$('img').eq(i+1).offset().top){
                             cur=i;
                             break;
                		}else{
                             cur=i;
                		}
                	}
                	goWhat(i);      
                }
                //初始化
                scoll();
              //开始监听滚动条
			$(document).scroll(function(){
				   scoll();     	
			});
			for(var i=0;i<5;i++){
				goWhere(i,i);
			}
		})
	</script>
</body>
</html>

面向对象编程：

 $(function(){
           //电梯
           var speed=1000,//滑动的速度，单位ms
               body = $('body,html');
           $(window).scroll(function (){
               var top1 = [];
               for (var ii=0;ii<5;ii++){
                   top1.push($("#f"+(ii+1)).offset().top);
               }
               var cur = 0;
               var topP = $(document).scrollTop();
               var lastTop=$('#f5').offset().top-600;
             /*  if(topP>700&&topP<lastTop){
                   $(".nav").show();
               }else{
                   $(".nav").hide();
               } */
               for(var i=0;i<top1.length;i++){
                   if( $(window).scrollTop()+200 < top1[i+1]){
                       cur = i;
                       break;
                   }else{
                       cur = i;
                   }
               }
               $('.nav>p').eq(cur).addClass("actv").siblings().removeClass("actv");


           });


           $('.nav>p').on('click', function(){
               var h = $('#'+$(this).attr('data-f')).offset().top;
               body.stop(true, true).animate({scrollTop: h}, speed);
           });
           $('.imgBox>.pincou').on('click',function(){


               body.stop(true, true).animate({scrollTop: $('#f5').offset().top}, speed);
           }); 
})

猜你喜欢