近来,小码哥应公司需求方要求,要在未来一个专题页面中加入一个效果:即,侧栏导航点击实现页面内容部分运动到相应位置,以及随着body滚动条滚动使导航按钮效果和页面相应内容对应上的一个效果。起初小码哥做的时候,只实现了点击导航按钮让页面相应的内容定位到和按钮相应的地方(在此可以查看小码哥先前写的关于锚点的文章);而随滚动条实现按钮和内容相对应的效果没有做出来,由于项目专题的时限问题,小码哥借鉴了网上一个案例,将其套在自己的页面就够里,实现了想要的效果。
创新互联建站-专业网站定制、快速模板网站建设、高性价比蚌埠网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式蚌埠网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖蚌埠地区。费用合理售后完善,十载实体公司更值得信赖。
废话不多说了,直接上码吧,,,,,,,,,,,
*{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 h5{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;}
$(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 //alert(self.offsetTop[0]); self.n=0; }else{ for(var j=0;j if(stval>(self.offsetTop[j]+300)&& stval }; }; 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(); }); 以上代码包括了所有,有兴趣的码农们如果有兴趣研究,可以直接拷贝所有代码,自建一个html文件运行就可!!
标题名称:JS侧栏导航点击定位页面内容位置及滚动条滚动改变导航元素对应状态
新闻来源:http://cdxtjz.cn/article/igjide.html