成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

先給大家展示下效果圖，看看是不是親想要實現的效果，如果還滿意的話請查看本文詳情，同時大家也可以下載源碼哦。

效果圖：

效果展示 源碼下載

代碼說明:

仿百度百科右側導航代碼jquery插件，這個仿百科右側導航js代碼，在很久以前就像搞個用了，因為這個導航特別適合長篇文檔使用，花了半天時間寫了這個仿百科導航插件，不過和百度百科比起來還是有點弱，沒有實現右側導航區域滾動的功能，如果您的文檔不是超級變態長，應該夠用。

如果你的導航超級長，可能要用到側邊導航頁可以滾動，一般情況下還是用不到，等過些時候有好的實現思路再搞吧，暫時沒想到實現右側導航區域和左側內容的滾動并且聯動的好辦法。

注意：var directoryNav = new DirectoryNav($("h2,h3"),{}); 中的"h2,h3"就是生成兩級導航的內容節點

/*
 *仿百度百科右側導航代碼 - 頁面目錄結構導航 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，則一直顯示
 });

在寫百度百科右側導航js代碼的時候有個想法，就是讓右側導航區域的滾動條和左側內容的滾動條用一個計算公式讓他們關聯起來，實現同步滾動。