jquery imitation Baidu Encyclopedia bottom floating navigation special effects _jquery

jquery similar to Baidu Encyclopedia bottom navigation Preview, the code is very simple, here is no more nonsense.

Effect Chart:

Css

 * {
      margin:0;
      padding:0
    }

    . wrap {
      width:1000px;
      Overflow:hidden;
      margin:0 Auto;

    Content {
      width:780px;
      Float:left
    }

    . Slide {
      width:200px;
      Float:right;
    }

Html

<div class= "wrap" > <div class= "Content" > 
 

JS

<script> var allele = $ (': header[class*= "headline"]);
  var headlen = allele.length;
  var ddarr = []; Generate slide navigation based on page content Allele.each (function (i) {var sideindex, sidename, Ddid, highlight= ', DdC
    Lass, Sideanchor;
    Sidename = $ (this). Find ('. Headline-content '). Text ();
      if ($ (this). Hasclass (' headline-1 ')} {sideanchor = Sideindex = $ (this). Find ('. anchor-1 '). EQ (0). attr (' name ');
    Ddclass = ' sidecatalog-item1 ';
      }else{Sideanchor = $ (this). Find ('. anchor-2 ')-eq (0). attr (' name ');
      Sideindex = Sideanchor.replace ('-', '. ');
    Ddclass = ' sidecatalog-item2 ';
    } ddid = ' sidetoolbar-item-0-' + sideanchor;
    if (i==0) {highlight = ' highlight '; var ddhtml = ' <dd id= ' + ddid + ' "class=" ' +ddclass + ' + Highlight + ' "> ' + ' <span class=" Sidec Atalog-index1 "> ' + sideindex + ' </span> ' + ' <a class=" nslog:1026 "onclick=" return false; "title=" part ' +sideanchor+ ' "href=" #' +sideanchor+ ' > ' + sidename + ' </a> ' + ' <span class= ' Sidecatalog-dot ' ></span> ' + '
    </dd> ';
  Ddarr.push (ddhtml);
  });

  $ (' #sideCatalog-catalog DL '). HTML (Ddarr.join ('));
  Set the location of the navigation var slidetop = $ (window). Height ()-$ ('. Slide '). Height ();

  $ ('. Slide '). CSS (' top ', slidetop);
  var slideinnerheight = $ (' #sideCatalog-catalog dl '). Height ();
  var slideoutheight = $ (' #sideCatalog-catalog '). Height ();
  var enabletop = slideinnerheight-slideoutheight;
  var step = 50;
      Click the Up button $ (' #sideCatalog-down '). Bind (' click ', function () {if ($ (this). Hasclass (' sidecatalog-down-enable ')) { if ((Enabletop-math.abs (parseint (' #sideCatalog-catalog dl '). CSS (' top '))) > Step) {$ (' #sideCatalog-catal
        OG dl '). Stop (). Animate ({' top ': ' = ' + step}, ' fast ');
      $ (' #sideCatalog-up '). Removeclass (' sidecatalog-up-disable '). addclass (' sidecatalog-up-enable '); else {$ (' #sideCatalog-catalog DL '). Stop (). Animate ({' Top ':-ENabletop}, ' fast ');
      $ (this). Removeclass (' sidecatalog-down-enable '). addclass (' sidecatalog-down-disable ');
    } else {return false; 
      })//Click the Down button $ (' #sideCatalog-up '). Bind (' click ', function () {if ($ (this). Hasclass (' sidecatalog-up-enable ')) { if (Math.Abs ($ (' #sideCatalog-catalog dl '). CSS (' top ')) > Step) {$ (' #sideCatalog-catalog DL '). S
        Top (). Animate ({' top ': ' + = ' + step}, ' fast ');
      $ (' #sideCatalog-down '). Removeclass (' sidecatalog-down-disable '). addclass (' sidecatalog-down-enable ');
        else {$ (' #sideCatalog-catalog DL '). Stop (). Animate ({' top ': ' 0 '}, ' fast ');
      $ (this). Removeclass (' sidecatalog-up-enable '). addclass (' sidecatalog-up-disable ');
    } else {return false; //Click each directory in the navigation $ (' #sideCatalog-catalog DL '). Delegate (' DD ', ' click '), function () {var index = $ (' #sideCatalo
    G-catalog DL DD '). Index ($ (this));
    Scrollslide ($ (this), index); var Ddindex = $ (this). Find ('A '). Stop (). attr (' href '). LastIndexOf (' # ');
    var Ddid = $ (this). Find (' a '). Stop (). attr (' href '). substring (ddindex+1);
    var windowtop = $ (' a[name= ' + Ddid + ' "]). Offset (). Top;
  $ (' body,html '). Animate ({scrolltop:windowtop}, ' fast '); ///scrolling page, that is, scroll bar scrolling $ (window). Scroll (function () {if ($ (this). ScrollTop () >$ (this). Height ()) {$ ('. Slide '). sh
    ow ();
    }else{$ ('. Slide '). Hide (); for (var i=headlen-1; i>=0; i--) {if ($ (this). ScrollTop () >=allele.eq (i). Offset (). TOP-ALLELE.EQ (i). he
        Ight ()) {var index = i;
        $ (' #sideCatalog-catalog DL dd '). EQ (index). addclass (' highlight '). Siblings (' DD '). Removeclass (' highlight ');
        Scrollslide (' #sideCatalog-catalog DL-DD '). EQ (index), index);
      return false;
      else {$ (' #sideCatalog-catalog DL dd '). EQ (0). addclass (' highlight '). Siblings (' DD '). Removeclass (' highlight '); (}})//navigation scrolling, and up, down button display hidden function scrollslide (that, index) {if (Index < 5) {
      $ (' #sideCatalog-catalog DL '). Stop (). Animate ({' top ': ' 0 '}, ' fast ');
      $ (' #sideCatalog-down '). Removeclass (' sidecatalog-down-disable '). addclass (' sidecatalog-down-enable ');
    $ (' #sideCatalog-up '). Removeclass (' sidecatalog-up-enable '). addclass (' sidecatalog-up-disable ');
      else if (Index > one) {$ (' #sideCatalog-catalog DL '). Stop (). Animate ({' Top ':-enabletop}, ' fast ');
      $ (' #sideCatalog-down '). Removeclass (' sidecatalog-down-enable '). addclass (' sidecatalog-down-disable ');
    $ (' #sideCatalog-up '). Removeclass (' sidecatalog-up-disable '). addclass (' sidecatalog-up-enable '); else {var dltop = parseint ($ (' #sideCatalog-catalog dl '). CSS (' top ") + SLIDEOUTHEIGHT/2-(That.offset (). Top-$
      (' #sideCatalog-catalog '). Offset (). top);
      $ (' #sideCatalog-catalog DL '). Stop (). Animate ({' Top ': dltop}, ' fast ');
      $ (' #sideCatalog-down '). Removeclass (' sidecatalog-down-disable '). addclass (' sidecatalog-down-enable '); $ (' #sideCatalog-up '). Removeclass (' sidecatalog-up-Disable '). addclass (' sidecatalog-up-enable ');
  }//Sticky $ (' #sideToolbar-up '). Bind (' click ', Function () {$ (' body,html '). Animate ({scrolltop:0}, ' fast ');
      //slide content display and hide $ (' #sideCatalogBtn '). Bind (' click ', function () {if ($ (this). Hasclass (' sidecatalogbtndisable ')) {
      $ (this). Removeclass (' sidecatalogbtndisable ');
    $ (' #sideCatalog '). CSS (' visibility ', ' visible ');
      }else{$ (this). addclass (' sidecatalogbtndisable ');
    $ (' #sideCatalog '). CSS (' visibility ', ' hidden ');
 }) </script>