首页
所有分类
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 Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
微信小程序实战之登录页面制作（5）
Mar 30 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
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
pt-archiver(1) 忘记密码(1) ICF-5900W(2) Fragment(1) B+树(2) 增删改查(2) instantclient(1) 存储过程(3) TcpServer(1) muduo(1)
You might like
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
jquery tools之tooltip
2009/07/25 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
Javascript学习笔记之 函数篇（一） : 函数声明和函数表达式
2014/06/24 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
如何正确理解vue中的key详解
2019/11/02 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
pyramid配置session的方法教程
2013/11/27 Python
python中文编码问题小结
2014/09/28 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
新西兰最大的品牌运动鞋购物网站：Platypus NZ
2017/10/27 全球购物
日本最大的购物网站：日本乐天市场（Rakuten Ichiba）
2020/11/04 全球购物
六十大寿答谢词
2014/01/12 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
Nginx源码编译安装过程记录
2021/11/17 Servers
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
Java 写一个简单的图书管理系统
2022/04/26 Java/Android