首页
所有分类
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 相关文章推荐
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
js判断鼠标移入移出方向的方法
Jun 24 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) 三角函数(1) nacos(1) Dijkstra(1) seata(1) MyBatis(5) 迪杰斯特拉(1) 动态代理(1) Android Studio(4) cv2(1)
You might like
建立文件交换功能的脚本（三）
2006/10/09 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
Python的另外几种语言实现
2015/01/29 Python
浅谈Python中数据解析
2015/05/05 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
python中WSGI是什么，Python应用WSGI详解
2017/11/24 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Django框架 信号调度原理解析
2019/09/04 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
Python龙贝格法求积分实例
2020/02/29 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
python 实现IP子网计算
2021/02/18 Python
Europcar比利时：租车
2019/08/26 全球购物
Prototype如何更新局部页面
2013/03/03 面试题
支教自我鉴定
2014/01/18 职场文书
安全保证书范文
2014/04/29 职场文书
优秀护士演讲稿
2014/04/30 职场文书
天地会口号
2014/06/17 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
财政局个人年终总结
2015/03/03 职场文书
承兑汇票延期证明
2015/06/23 职场文书
MySQL触发器的使用
2021/05/24 MySQL
React Fragment介绍与使用详解
2021/11/11 Javascript