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

前端技术 2023/09/08 JavaScript

jquery类似百度百科底部导航预览，代码很简单，这里就不多废话了。

效果图：

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\">
  <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>

本文地址：https://www.stayed.cn/item/21297

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)