/* *仿百度百科右側導航代碼 - 頁面目錄結構導航 v0.01 * 只寫了兩級，無限級別也可以，是邏輯上的級別，html結構全是同一級別 * 滑標動畫用的css3過渡動畫，不支持的瀏覽器就沒動畫效果了 * 和百度百科比起來還是比較弱，沒有實現右邊也可以滾動的功能 */ function DirectoryNav($h,config){  this.opts = $.extend(true,{   scrollThreshold:0.5, //滾動檢測閥值 0.5在瀏覽器窗口中間部位   scrollSpeed:700,  //滾動到指定位置的動畫時間   scrollTopBorder:500, //滾動條距離頂部多少的時候顯示導航   easing: 'swing',  //不解釋   delayDetection:200,  //延時檢測，避免滾動的時候檢測過于頻繁   scrollChange:function(){}  },config);  this.$win = $(window);  this.$h = $h;  this.$pageNavList = "";  this.$pageNavListLis ="";  this.$curTag = "";  this.$pageNavListLiH = "";  this.offArr = [];  this.curIndex = 0;  this.scrollIng = false;  this.init(); } DirectoryNav.prototype = {  init:function(){   this.make();   this.setArr();   this.bindEvent();  },  make:function(){   //生成導航目錄結構,這是根據需求自己生成的。如果你直接在頁面中輸出一個結構那也挺好不用 搞js   $("body").append('<div class="directory-nav" id="directoryNav"><ul></ul><span class="cur-tag"></span><span class="c-top"></span><span class="c-bottom"></span><span class="line"></span></div>>');   var $hs = this.$h,    $directoryNav = $("#directoryNav"),    temp = [],    index1 = 0,    index2 = 0;   $hs.each(function(index){    var $this = $(this),      text = $this.text();    if(this.tagName.toLowerCase()=='h2'){     index1++;     if(index1%2==0) index2 = 0;     temp.push('<li class="l1"><span class="c-dot"></span>'+index1+'. <a class="l1-text">'+text+'</a></li>');    }else{     index2++;     temp.push('<li class="l2">'+index1+'.'+index2+' <a class="l2-text">'+text+'</a></li>');    }   });   $directoryNav.find("ul").html(temp.join(""));   //設置變量   this.$pageNavList = $directoryNav;   this.$pageNavListLis = this.$pageNavList.find("li");   this.$curTag = this.$pageNavList.find(".cur-tag");   this.$pageNavListLiH = this.$pageNavListLis.eq(0).height();   if(!this.opts.scrollTopBorder){    this.$pageNavList.show();   }  },  setArr:function(){   var This = this;   this.$h.each(function(){    var $this = $(this),     offT = Math.round($this.offset().top);    This.offArr.push(offT);   });  },  posTag:function(top){   this.$curTag.css({top:top+'px'});  },  ifPos:function(st){   var offArr = this.offArr;   //console.log(st);   var windowHeight = Math.round(this.$win.height() * this.opts.scrollThreshold);   for(var i=0;i<offArr.length;i++){    if((offArr[i] - windowHeight) < st) {     var $curLi = this.$pageNavListLis.eq(i),      tagTop = $curLi.position().top;     $curLi.addClass("cur").siblings("li").removeClass("cur");     this.curIndex = i;     this.posTag(tagTop+this.$pageNavListLiH*0.5);     //this.curIndex = this.$pageNavListLis.filter(".cur").index();     this.opts.scrollChange.call(this);    }   }  },  bindEvent:function(){   var This = this,    show = false,    timer = 0;   this.$win.on("scroll",function(){    var $this = $(this);    clearTimeout(timer);    timer = setTimeout(function(){     This.scrollIng = true;     if($this.scrollTop()>This.opts.scrollTopBorder){      if(!This.$pageNavListLiH) This.$pageNavListLiH = This.$pageNavListLis.eq(0).height();      if(!show){       This.$pageNavList.fadeIn();       show = true;      }      This.ifPos( $(this).scrollTop() );     }else{      if(show){       This.$pageNavList.fadeOut();       show = false;      }     }    },This.opts.delayDetection);   });   this.$pageNavList.on("click","li",function(){    var $this = $(this),     index = $this.index();    This.scrollTo(This.offArr[index]);   })  },  scrollTo: function(offset,callback) {   var This = this;   $('html,body').animate({    scrollTop: offset   }, this.opts.scrollSpeed, this.opts.easing, function(){    This.scrollIng = false;    //修正彈兩次回調 蛋疼    callback && this.tagName.toLowerCase()=='body' && callback();   });  } }; //調用實例化 var directoryNav = new DirectoryNav($("h2,h3"),{  scrollTopBorder:0 //滾動條距離頂部多少的時候顯示導航，如果為0，則一直顯示 });