The realization of imitation Baidu Encyclopedia of the right navigation code based on jquery download _jquery

First show you the effect of the picture, see if you want to achieve the effect, if you are satisfied with the details of this article, and you can download the source Oh.

Effect Chart:

Effect Display source Download

Code Description:

Imitation Baidu Encyclopedia Right navigation code jquery Plug-ins, this imitation encyclopedia right side of the navigation JS code, in a long time ago like a use, because this navigation is particularly suitable for lengthy document use, spent half a day to write this copy encyclopedia navigation Plug-ins, but compared with Baidu Encyclopedia is still a little weak, Without the ability to scroll through the right navigation area, you should have enough if your document is not a super pervert.

If your navigation is super long, you may want to use the side navigation page can be used to scroll, under normal circumstances or not to use, and so on a good way to realize the idea of doing it, temporarily did not think of the right navigation area and the left side of the scroll and linkage of a good method.

Note: var Directorynav = new Directorynav ($ ("H2,h3"), {}); The "H2,h3" in is the content node that generates level two navigation

* * Imitation Baidu Encyclopedia Right Navigation code-page directory structure navigation v0.01 * Only wrote two levels, infinite level can also, is the level of logic, HTML structure is all the same level * slide animation with the CSS3 transition animation, not supported by the browser does not have animation * and Baidu Encyclopedia is still relatively weak , there is no implementation on the right can also scroll function */function Directorynav ($h, config) {this.opts = $.extend (true,{scrollthreshold:0.5,//scrolling detection threshold 0.5 in scrollspeed:700 the middle part of the browser window,//scroll to the animation time at the specified position scrolltopborder:500,///scroll bar from the top to show navigation easing: ' Swing ',//Don't explain Del
  AYDETECTION:200,//delay detection, avoid scrolling when detection is too frequent 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 () {//generates the navigation directory structure, which is generated from the requirements themselves. If you output a structure directly on the page, that's fine. 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 (the 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 (""));
   Set Variable this. $pageNavList = $directoryNav;
   this. $pageNavListLis =-$pageNavList. Find ("Li");
   this. $curTag = that $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. E
     Q (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", the 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.scrolli
    ng = false;
   Correction Bounce two times callback egg pain Callback && this.tagName.toLowerCase () = = ' Body ' && callback ();
  });
 }
 }; Invoke materialized Var dIrectorynav = new Directorynav ($ ("H2,h3"), {scrolltopborder:0//scroll bar to show navigation at the top of the number, if 0, always show}); 

In the Baidu Encyclopedia on the right side of the navigation JS code when there is an idea, that is, the right navigation area of the scroll bar and the left side of the content of the scroll bar with a calculation formula let them relate to achieve synchronous scrolling.