溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
近來，小碼哥應公司需求方要求，要在未來一個專題頁面中加入一個效果：即，側欄導航點擊實現頁面內容部分運動到相應位置，以及隨著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 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;}
</style>
</head>
<body id="top">
<div class="header">頭部！</div>
<div class="content">
<div class="cont1 cont"><h5>周一</h5></div><!--cont1-->
<div class="cont2 cont"><h5>周二</h5></div><!--cont2-->
<div class="cont3 cont"><h5>周三</h5></div><!--cont3-->
<div class="cont4 cont"><h5>周四</h5></div><!--cont4-->
<div class="cont5 cont"><h5>周五</h5></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>
以上代碼包括了所有，有興趣的碼農們如果有興趣研究，可以直接拷貝所有代碼，自建一個html文件運行就可！！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
