<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="./javascript/jquery-3.6.1.min.js"></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>
********
