近來(lái),小碼哥應(yīng)公司需求方要求,要在未來(lái)一個(gè)專題頁(yè)面中加入一個(gè)效果:即,側(cè)欄導(dǎo)航點(diǎn)擊實(shí)現(xiàn)頁(yè)面內(nèi)容部分運(yùn)動(dòng)到相應(yīng)位置,以及隨著body滾動(dòng)條滾動(dòng)使導(dǎo)航按鈕效果和頁(yè)面相應(yīng)內(nèi)容對(duì)應(yīng)上的一個(gè)效果。起初小碼哥做的時(shí)候,只實(shí)現(xiàn)了點(diǎn)擊導(dǎo)航按鈕讓頁(yè)面相應(yīng)的內(nèi)容定位到和按鈕相應(yīng)的地方(在此可以查看小碼哥先前寫(xiě)的關(guān)于錨點(diǎn)的文章);而隨滾動(dòng)條實(shí)現(xiàn)按鈕和內(nèi)容相對(duì)應(yīng)的效果沒(méi)有做出來(lái),由于項(xiàng)目專題的時(shí)限問(wèn)題,小碼哥借鑒了網(wǎng)上一個(gè)案例,將其套在自己的頁(yè)面就夠里,實(shí)現(xiàn)了想要的效果。
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比蚌埠網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式蚌埠網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋蚌埠地區(qū)。費(fèi)用合理售后完善,十載實(shí)體公司更值得信賴。
廢話不多說(shuō)了,直接上碼吧,,,,,,,,,,,
*{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(){//滾動(dòng)條滾動(dòng)改變導(dǎo)航元素效果
var self=this;//這里的this等同于上面的this
$(window).bind('load scroll',function(){
var stval=$(this).scrollTop();
if(stval>399){//判斷滾動(dòng)條滾動(dòng)距離大于或小于header高度時(shí),讓導(dǎo)航效果對(duì)應(yīng)在第一個(gè)上
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(){// 點(diǎn)擊返回首頁(yè)Top按鈕實(shí)現(xiàn)頁(yè)面不刷新返回頂部 $('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){// 點(diǎn)擊導(dǎo)航定位頁(yè)面內(nèi)容 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(){// 滾動(dòng)條滾動(dòng) 頁(yè)面不同內(nèi)容的offsetTop值實(shí)現(xiàn)按鈕對(duì)應(yīng)效果 self.scrolltype=true; $(self.n).addClass('cur').parent().siblings().children().removeClass('cur'); }); }); }; return navObj; })(window.navObj || {}); nav.init(); }); 以上代碼包括了所有,有興趣的碼農(nóng)們?nèi)绻信d趣研究,可以直接拷貝所有代碼,自建一個(gè)html文件運(yùn)行就可??!
當(dāng)前名稱:JS側(cè)欄導(dǎo)航點(diǎn)擊定位頁(yè)面內(nèi)容位置及滾動(dòng)條滾動(dòng)改變導(dǎo)航元素對(duì)應(yīng)狀態(tài)
分享URL:http://weahome.cn/article/igjide.html