JS實現點選導航欄之後頁面滾動
阿新 • • 發佈：2019-01-06
原文地址：http://blog.csdn.net/luoshengmenwh/article/details/52830687
側欄導航點選實現頁面內容部分運動到相應位置，以及隨著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 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="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>
下面的效果感覺更好
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.7.1.min.js"></script> <style> body{ margin:0; padding:0;} .main{ width:100%; height:auto;} .main div{ width:100%;} #float01{ height:930px; background:#004} #float02{ height:900px; background:#00f} #float03{ height:980px; background:#0ff} #float04{ height:930px; background:#0ad} #float05{ height:960px; background:#0d0} #float06{ height:970px; background:#0f0} #float07{ height:900px; background:#dd4} div.floatCtro{ width:60px; height:350px; position: fixed; left:25px; top:10%; z-index:100} div.floatCtro p{width:60px; text-align:center; height:40px; line-height:40px; font-family:'微軟雅黑'; font-size:14px; color:#676767; margin:0; padding:0; cursor:pointer; background:#fff;} div.floatCtro a{ display:inline-block; display:none; width:60px; height:60px; margin:10px 0 0 0; background:#fff; color:#000; vertical-align:middle; cursor:pointer;} div.floatCtro a span{ display:block; width:28px; height:44px; line-height:22px; font-family:'微軟雅黑'; font-size:14px; line-height:22px; text-align:center; margin:8px 16px; _margin:-10px 0 0 16px;} div.floatCtro a:hover{ background:#000; color:#fff; zoom:1;} div.floatCtro p:hover{ background:#c40000; color:#fff;} div.floatCtro p.cur{ background:#c40000; color:#fff;} </style> <script> $(function(){ var AllHet = $(window).height(); var mainHet= $('.floatCtro').height(); var fixedTop = (AllHet - mainHet)/2 // $('div.floatCtro').css({top:fixedTop+'px'}); $('div.floatCtro p').click(function(){ var ind = $('div.floatCtro p').index(this)+1; var topVal = $('#float0'+ind).offset().top; $('body,html').animate({scrollTop:topVal},1000) }) $('div.floatCtro a').click(function(){ $('body,html').animate({scrollTop:0},1000) }) $(window).scroll(scrolls) scrolls() function scrolls(){ var f1,f2,f3,f4,f5,f6,f7,bck; var fixRight = $('div.floatCtro p'); var blackTop = $('div.floatCtro a') var sTop = $(window).scrollTop(); fl = $('#float01').offset().top; f2 = $('#float02').offset().top; f3 = $('#float03').offset().top; f4 = $('#float04').offset().top; f5 = $('#float05').offset().top; f6 = $('#float06').offset().top; f7 = $('#float07').offset().top; if(sTop<=f2-100){ blackTop.fadeOut(300).css('display','none') } else{ blackTop.fadeIn(300).css('display','block') } if(sTop>=fl){ fixRight.eq(0).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f2-100){ fixRight.eq(1).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f3-100){ fixRight.eq(2).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f4-100){ fixRight.eq(3).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f5-100){ fixRight.eq(4).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f6-100){ fixRight.eq(5).addClass('cur').siblings().removeClass('cur'); } if(sTop>=f7-100){ fixRight.eq(6).addClass('cur').siblings().removeClass('cur'); } } }) </script> <title>test</title> </head> <body> <div class="main"> <div id="float01" class="cur"></div> <div id="float02"></div> <div id="float03"></div> <div id="float04"></div> <div id="float05"></div> <div id="float06"></div> <div id="float07"></div> <div id="float08"></div> <div id="float09"></div> <div class="floatCtro"> <p>導航一</p> <p>導航二</p> <p>導航三</p> <p>導航四</p> <p>導航五</p> <p>導航六</p> <p>導航七</p> <a> <font style="width:60px; height:1px; display:block"></font> <span>返回頂部</span> </a> </div> </div> </body> </html>