原文地址:http://blog.csdn.net/luoshengmenwh/article/details/52830687
侧栏导航点击实现页面内容部分运动到相应位置,以及随着body滚动条滚动使导航按钮效果和页面相应内容对应上的一个效果。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS 控制页面上下滚动及右侧浮动导航效果</title>
<style type="text/css">
*{margin:0;padding:0;}
.header{width:1000px;margin:0 auto;height:400px;background:#ccc;font-size:40px;text-align:center;line-height:400px;color:#00FFFF;}
.content{width:1000px;margin:0 auto;}
.cont{height:500px;}
.cont1{background:#666666;}
.cont2{background:#999999;}
.cont3{background:#CCCCCC;}
.cont4{background:#FF0000;}
.cont5{background:#6699CC;}
.cont h4{font-size:16px;}
.pop1{position:absolute;top:400px;right:50px;width:100px;height:240px;border:1px #00FFFF solid;}
.pop1 .r_nav{list-style:none;}
.pop1 .r_nav li{width:100px;}
.pop1 .r_nav li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}
.pop1 .r_nav li a:hover,.pop1 .r_nav li a.cur{background:#6699CC;color:#00FFCC;}
.pop1 .tt a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}
.pop1 .tt a:hover{background:#6699cc;color:#00ffcc;}
.pop{width:100px;height:240px;border:1px #00FFFF solid;position:fixed;margin:0;padding:0;top:50%;margin-top:-380px;right:50px;}
.pop .r_nav{list-style:none;}
.pop .r_nav li{width:100px;}
.pop .r_nav li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}
.pop .r_nav li a:hover,.pop .r_nav li a.cur{background:#6699CC;color:#00FFCC;}
.pop .tt a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}
.pop .tt a:hover{background:#6699cc;color:#00ffcc;}
</style>
</head>
<body id="top">
<div class="header">头部!</div>
<div class="content">
<div class="cont1 cont"><h4>周一</h4></div><!--cont1-->
<div class="cont2 cont"><h4>周二</h4></div><!--cont2-->
<div class="cont3 cont"><h4>周三</h4></div><!--cont3-->
<div class="cont4 cont"><h4>周四</h4></div><!--cont4-->
<div class="cont5 cont"><h4>周五</h4></div><!--cont5-->
</div><!--content-->
<div id="popup" class="pop1">
<ul class="r_nav">
<li class="lis"><a class="cur" href="javascript:;" title="">星期一</a></li>
<li class="lis"><a href="javascript:;" title="">星期二</a></li>
<li class="lis"><a href="javascript:;" title="">星期三</a></li>
<li class="lis"><a href="javascript:;" title="">星期四</a></li>
<li class="lis"><a href="javascript:;" title="">星期五</a></li>
</ul><!--.r_nav-->
<div class="tt"><a class="toTop" href="javascript:;" title="">Top</a></div>
</div><!--#popup-->
<script src="js/jquery1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var nav=(function(navObj){
navObj.init=function(){
this.n=0;
this.offsetTop=[];
this.scrolltype=true;
this.review=function(){
$('#popup .lis a').eq(this.n).addClass('cur').parent().siblings().children().removeClass('cur');
};
for(var i=0;i<$('.content .cont').length;i++){
this.offsetTop.push($('.content .cont').eq(i).offset().top);
};
navObj.bindE();
};
navObj.bindE=function(){//滚动条滚动改变导航元素效果
var self=this;//这里的this等同于上面的this
$(window).bind('load scroll',function(){
var stval=$(this).scrollTop();
if(stval>399){//判断滚动条滚动距离大于或小于header高度时,让导航效果对应在第一个上
if(stval<self.offsetTop[0]){
//alert(self.offsetTop[0]);
self.n=0;
}else{
for(var j=0;j<self.offsetTop.length;j++){
if(stval>(self.offsetTop[j]+300)&& stval<self.offsetTop[j+1]){self.n=j+1;break;}//这里的300是常量
};
};
if(self.scrolltype===true){
self.review();
}
$('#popup').removeClass('pop1').addClass('pop');
}else{
$('#popup').removeClass('pop').addClass('pop1');
$('#popup li a').parent('li:first-child').children().addClass('cur').parent().siblings().children().removeClass('cur');
};
});
$('.toTop').click(function(){// 点击返回首页Top按钮实现页面不刷新返回顶部
$('html, body').animate({scrollTop:0+'px'},500);
$('#popup li a').parent('li:first-child').children().addClass('cur').parent().siblings().children().removeClass('cur');
});
$('#popup .lis').delegate('a','click',function(e){// 点击导航定位页面内容
self.n=$(this).index('#popup .lis a');
self.scrolltype=false;
self.review();
var t=self.offsetTop[self.n];
$('html,body').animate({scrollTop:t},500,function(){// 滚动条滚动 页面不同内容的offsetTop值实现按钮对应效果
self.scrolltype=true;
$(self.n).addClass('cur').parent().siblings().children().removeClass('cur');
});
});
};
return navObj;
})(window.navObj || {});
nav.init();
});
</script>
</body>
</html>
下面的效果感觉更好
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.7.1.min.js"></script>
<style>
body{ margin:0; padding:0;}
.main{ width:100%; height:auto;}
.main div{ width:100%;}
#float01{ height:930px; background:#004}
#float02{ height:900px; background:#00f}
#float03{ height:980px; background:#0ff}
#float04{ height:930px; background:#0ad}
#float05{ height:960px; background:#0d0}
#float06{ height:970px; background:#0f0}
#float07{ height:900px; background:#dd4}
div.floatCtro{ width:60px; height:350px; position: fixed; left:25px; top:10%; z-index:100}
div.floatCtro p{width:60px; text-align:center; height:40px; line-height:40px; font-family:'微软雅黑'; font-size:14px; color:#676767; margin:0; padding:0; cursor:pointer; background:#fff;}
div.floatCtro a{ display:inline-block; display:none; width:60px; height:60px; margin:10px 0 0 0; background:#fff; color:#000; vertical-align:middle; cursor:pointer;}
div.floatCtro a span{ display:block; width:28px; height:44px; line-height:22px; font-family:'微软雅黑'; font-size:14px; line-height:22px; text-align:center; margin:8px 16px; _margin:-10px 0 0 16px;}
div.floatCtro a:hover{ background:#000; color:#fff; zoom:1;}
div.floatCtro p:hover{ background:#c40000; color:#fff;}
div.floatCtro p.cur{ background:#c40000; color:#fff;}
</style>
<script>
$(function(){
var AllHet = $(window).height();
var mainHet= $('.floatCtro').height();
var fixedTop = (AllHet - mainHet)/2
// $('div.floatCtro').css({top:fixedTop+'px'});
$('div.floatCtro p').click(function(){
var ind = $('div.floatCtro p').index(this)+1;
var topVal = $('#float0'+ind).offset().top;
$('body,html').animate({scrollTop:topVal},1000)
})
$('div.floatCtro a').click(function(){
$('body,html').animate({scrollTop:0},1000)
})
$(window).scroll(scrolls)
scrolls()
function scrolls(){
var f1,f2,f3,f4,f5,f6,f7,bck;
var fixRight = $('div.floatCtro p');
var blackTop = $('div.floatCtro a')
var sTop = $(window).scrollTop();
fl = $('#float01').offset().top;
f2 = $('#float02').offset().top;
f3 = $('#float03').offset().top;
f4 = $('#float04').offset().top;
f5 = $('#float05').offset().top;
f6 = $('#float06').offset().top;
f7 = $('#float07').offset().top;
if(sTop<=f2-100){
blackTop.fadeOut(300).css('display','none')
}
else{
blackTop.fadeIn(300).css('display','block')
}
if(sTop>=fl){
fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f2-100){
fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f3-100){
fixRight.eq(2).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f4-100){
fixRight.eq(3).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f5-100){
fixRight.eq(4).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f6-100){
fixRight.eq(5).addClass('cur').siblings().removeClass('cur');
}
if(sTop>=f7-100){
fixRight.eq(6).addClass('cur').siblings().removeClass('cur');
}
}
})
</script>
<title>test</title>
</head>
<body>
<div class="main">
<div id="float01" class="cur"></div>
<div id="float02"></div>
<div id="float03"></div>
<div id="float04"></div>
<div id="float05"></div>
<div id="float06"></div>
<div id="float07"></div>
<div id="float08"></div>
<div id="float09"></div>
<div class="floatCtro">
<p>导航一</p>
<p>导航二</p>
<p>导航三</p>
<p>导航四</p>
<p>导航五</p>
<p>导航六</p>
<p>导航七</p>
<a>
<font style="width:60px; height:1px; display:block"></font>
<span>返回顶部</span>
</a>
</div>
</div>
</body>
</html>