JS 側欄導航點擊定位頁面內容位置及滾動條滾動改變導航元素對應狀態

時間 2020-05-28

標籤導航點擊定位頁面內容位置滾動條滾動改變元素對應狀態欄目 JavaScript 简体版

原文原文鏈接

近來，小碼哥應公司需求方要求，要在將來一個專題頁面中加入一個效果：即，側欄導航點擊實現頁面內容部分運動到相應位置，以及隨着body滾動條滾動使導航按鈕效果和頁面相應內容對應上的一個效果。起初小碼哥作的時候，只實現了點擊導航按鈕讓頁面相應的內容定位到和按鈕相應的地方（在此能夠查看小碼哥先前寫的關於錨點的文章）；而隨滾動條實現按鈕和內容相對應的效果沒有作出來，因爲項目專題的時限問題，小碼哥借鑑了網上一個案例，將其套在本身的頁面就夠裏，實現了想要的效果。javascript

廢話很少說了，直接上碼吧,,,,,,,,,,,css

<!doctype html>html

<html>java

<head>jquery

<title>JS 控制頁面上下滾動及右側浮動導航效果</title>ui

*{margin:0;padding:0;}spa

.header{width:1000px;margin:0 auto;height:400px;background:#ccc;font-size:40px;text-align:center;line-height:400px;color:#00FFFF;}htm

.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>

</div>

</ul>

</div>

$(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文件運行就可！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。