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> *{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,//滑动的速度，单位msbody = $('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);});
})
