jquery仿百度百科底部浮动导航特效

 * {      margin: 0;      padding: 0    }    .wrap {      width: 1000px;      overflow: hidden;      margin: 0 auto;    }    .content {      width: 780px;      float: left;    }    .slide {      width: 200px;      float: right;    }

<div class="wrap"><div class="content">  <h2 class="headline-1">    <a class="anchor-1" name="1"></a>    <span class="headline-1-index">1</span>    <span class="headline-content">part1</span>  </h2>  <div class="para">    content1,content1    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="2"></a>    <span class="headline-2-index">2</span>    <span class="headline-content">part2</span>  </h2>  <div class="para">    content2,content2    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-2">    <a class="anchor-2" name="2-1"></a>    <!--<span class="headline-2-index">2-1</span>-->    <span class="headline-content">part2-1</span>  </h2>  <div class="para">    content2-1,content2-1    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-2">    <a class="anchor-2" name="2-2"></a>    <!--<span class="headline-1-index">2-2</span>-->    <span class="headline-content">part2-2</span>  </h2>  <div class="para">    content2-2,content2-2    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="3"></a>    <span class="headline-1-index">3</span>    <span class="headline-content">part3</span>  </h2>  <div class="para3">    content,content    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="4"></a>    <span class="headline-1-index">4</span>    <span class="headline-content">part4</span>  </h2>  <div class="para4">    content,content    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="5"></a>    <span class="headline-1-index">5</span>    <span class="headline-content">part5</span>  </h2>  <div class="para">    content5,content5    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="6"></a>    <span class="headline-1-index">6</span>    <span class="headline-content">part6</span>  </h2>  <div class="para">    content6,content6    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="7"></a>    <span class="headline-1-index">7</span>    <span class="headline-content">part7</span>  </h2>  <div class="para">    content7,content7    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="8"></a>    <span class="headline-1-index">8</span>    <span class="headline-content">part8</span>  </h2>  <div class="para">    content8,content8    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="9"></a>    <span class="headline-1-index">9</span>    <span class="headline-content">part9</span>  </h2>  <div class="para">    content9,content9    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="10"></a>    <span class="headline-1-index">10</span>    <span class="headline-content">part10</span>  </h2>  <div class="para">    content10,content10    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="11"></a>    <span class="headline-1-index">11</span>    <span class="headline-content">part11</span>  </h2>  <div class="para">    content11,content11    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="12"></a>    <span class="headline-1-index">12</span>    <span class="headline-content">part12</span>  </h2>  <div class="para">    content12,content12    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="13"></a>    <span class="headline-1-index">13</span>    <span class="headline-content">part13</span>  </h2>  <div class="para">    content13,content13    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="14"></a>    <span class="headline-1-index">14</span>    <span class="headline-content">part14</span>  </h2>  <div class="para">    content14,content14    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>  <h2 class="headline-1">    <a class="anchor-1" name="15"></a>    <span class="headline-1-index">15</span>    <span class="headline-content">part15</span>  </h2>  <div class="para">    content15,content15    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>    bottom  </div></div><div class="slide" style="">  <div id="sideToolbar" style="position: fixed; bottom: 0">    <div id="sideCatalog" class="sideCatalogBg" style="visibility: visible;">      <div id="sideCatalog-sidebar">        <div class="sideCatalog-sidebar-top"></div>        <div class="sideCatalog-sidebar-bottom"></div>      </div>      <div id="sideCatalog-updown" style="visibility: visible;">        <div id="sideCatalog-up" class="sideCatalog-up-disable" title="向上翻页"></div>        <div id="sideCatalog-down" class="sideCatalog-down-enable" title="向下翻页"></div>      </div>      <div id="sideCatalog-catalog">        <dl style="width:175px;zoom:1">          <!--          <dd id="sideToolbar-item-0-1" class="sideCatalog-item2 heightlight">            <span class="sideCatalog-index1">1</span>            <a class="nslog:1026" onclick="return false;" title="part1" href="#1">part1</a>            <span class="sideCatalog-dot"></span>          </dd>          <dd id="sideToolbar-item-0-2" class="sideCatalog-item1">            <span class="sideCatalog-index1">2</span>            <a class="nslog:1026" onclick="return false;" title="part2" href="#2">part2</a>            <span class="sideCatalog-dot"></span>          </dd>          <dd id="sideToolbar-item-0-2-1" class="sideCatalog-item2">            <span class="sideCatalog-index1">2-1</span>            <a class="nslog:1026" onclick="return false;" title="part2" href="#2-1">part2-1</a>            <span class="sideCatalog-dot"></span>          </dd>          -->        </dl>      </div>    </div>    <a id="sideCatalogBtn" class="" style="visibility: visible;" href="javascript:void(0);"></a>    <a id="sideToolbar-up" style="visibility: visible;" title="返回顶部" href="javascript:void(0)"></a>  </div></div></div>

<script>  var allEle = $(':header[class*="headline"]');  var headLen = allEle.length;  var ddArr = [];  //根据页面内容生成slide导航；  allEle.each(function(i){    var sideIndex,      sideName,      ddId,      highlight='',      ddClass,      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="sideCatalog-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(''));  //设置导航的位置  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;  //点击向上的按钮  $('#sideCatalog-down').bind('click', function () {    if ($(this).hasClass('sideCatalog-down-enable')) {      if ((enableTop - Math.abs(parseInt($('#sideCatalog-catalog dl').css('top')))) > step) {        $('#sideCatalog-catalog 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;    }  })  //点击向下的按钮  $('#sideCatalog-up').bind('click', function () {    if ($(this).hasClass('sideCatalog-up-enable')) {      if (Math.abs(parseInt($('#sideCatalog-catalog dl').css('top'))) > step) {        $('#sideCatalog-catalog dl').stop().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;    }  })  //点击导航中的各个目录  $('#sideCatalog-catalog dl').delegate('dd', 'click', function () {    var index = $('#sideCatalog-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');  })  //滚动页面，即滚动条滚动  $(window).scroll(function () {    if($(this).scrollTop()>$(this).height()){      $('.slide').show();    }else{      $('.slide').hide();    }    for (var i=headLen-1; i>=0; i--) {      if ($(this).scrollTop() >=allEle.eq(i).offset().top - allEle.eq(i).height()) {        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');      }    }  })  //导航的滚动，以及向上，向下按钮的显示隐藏  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 > 11) {      $('#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');    }  }  //置顶  $('#sideToolbar-up').bind('click', function(){    $('body,html').animate({scrollTop: 0}, 'fast');  })  //slide内容的显示与隐藏  $('#sideCatalogBtn').bind('click', function(){    if($(this).hasClass('sideCatalogBtnDisable')){      $(this).removeClass('sideCatalogBtnDisable');      $('#sideCatalog').css('visibility','visible');    }else{      $(this).addClass('sideCatalogBtnDisable');      $('#sideCatalog').css('visibility','hidden');    }  })</script>