首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 08, 2015

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

效果图：

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>

JS

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

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
总结jQuery插件开发中的一些要点
May 16 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 Javascript
如何通过JS实现日历简单算法
Oct 14 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
jquery实现页面虚拟键盘特效
Aug 08 #Javascript
Jquery实现顶部弹出框特效
Aug 08 #Javascript
Jquery数字上下滚动动态切换插件
Aug 08 #Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 #Javascript
jQuery实现列表内容的动态载入特效
Aug 08 #Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 #Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 #Javascript
自动化(1) Bean(3) zip(1) XML(1) 进销存(1) IOC(3) enumerate(1) list(1) find(1) metaclass(1)
You might like
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
React-intl 实现多语言的示例代码
2017/11/03 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
美国著名珠宝品牌之一：Jared The Galleria Of Jewelry
2016/10/01 全球购物
英国医生在线预约：Top Doctors
2019/10/30 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
企划主管岗位职责
2013/12/12 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
节能环保标语
2014/06/12 职场文书
父亲节活动策划方案
2014/08/24 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
中学生2014国庆节演讲稿：不屈的民族
2014/09/21 职场文书
团组织推荐意见
2015/06/05 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
详解Python函数print用法
2021/06/18 Python
python3中apply函数和lambda函数的使用详解
2022/02/28 Python