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>
(0)

相关推荐

  • JQuery 实现的页面滚动时浮动窗口控件

    1. Introduction: 这个控件能够实现的效果是当你的页面滚动时,某个DIV永远停留在你需要它停留的位置.同时可以为这个DIV设定个容器,当滚动条已经超过了这个容器,那么这个DIV就不再滚动了.有时候如果需要做个比较好用的导航条,使用这个控件挺不错的. 2. Code & Properties: 这个js文件是在jQuery和JQeury UI的核心上扩展的.所以使用它前你必须到JQuery的官网下载那两个js文件,jquery.js和ui.core.js. 整个javascript如

  • jQuery实现底部浮动窗口效果

    本文实例讲述了jQuery实现底部浮动窗口效果.分享给大家供大家参考,具体如下: <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <style type="text/css"> #foot_tel { width:100%;height:43px; background:url(styles/js/swt/tel_bj_20

  • jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

      复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>

  • jQuery实现的登录浮动框效果代码

    本文实例讲述了jQuery实现的登录浮动框效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery登录浮动框代码,点击登录按钮后可看到弹出了一个浮动层,右上角带有关闭按钮,本浮动层不支持拖动,在网上经常会见到的一种浮动层格式. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-float-login-dlg-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH

  • jQuery实现div浮动层跟随页面滚动效果

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jQuery实现点击按钮弹出可关闭层的浮动层插件

    本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件.分享给大家供大家参考.具体如下: 这是一款由漫画Jquery弹出层插件改编而来,小鸟Js弹窗插件,按ESC可以关闭窗口.默认不带样式,大家可以根据自己的项目写样式.弹出层代码很小,min版的只1.15k,因为小所以值得应用.希望有网友可以再改进,希望她变得更小. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-close-able-alert-dlg-plug-codes/ 具

  • jQuery之浮动窗口实现代码(两种方法)

    第一种方法:预览: Html代码 复制代码 代码如下: <html> <head> <title>浮动窗口</title> <link type="text/css" rel="stylesheet" href="css/overflow.css" /> <script type="text/javascript" src="js/jquery.js&

  • jQuery 实现侧边浮动导航菜单效果

    单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单通过锚点实现: 2.滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了: 计算 scrollTop 和 各个 div 的 offsetTop 的大小关系,判断现在网页显示的位置在什么地方,再根据计算的结果给对应的菜单项添加样式.比如第二个 div 的 off

  • jQuery固定浮动侧边栏实现思路及代码

    这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,现思路是这样的:首先获取需要跟随的DIV距离页面顶部的距离,然后判断,当浏览器滚动的距离大于该DIV本身距离顶部距离的时候,则添加CSS属性fixed即可. 代码如下 HTML代码: <div id="header">header</div> <div id="sidebarWrap"> <div id=&qu

  • 使用jQuery制作浮动工具栏的实例分享

    现在大家在浏览网站的时候,经常会发现一些浮动的条状栏,通常具有向上向下的功能,当你点击一下,就可以方便的回到顶部或者前往底部.其实打造这样一个工具边栏,并不是很难,使用jquery很容易就可以做出来.下面,你跟随我的步骤,一步一步的做一下,就可以做出来了,然后你可以根据这个代码,进行一些修改,自定义一些东西. 废话不多说,先说一下我做的这个工具边栏.这个工具边栏是符合我自己做的模板"Q21",Q21模板的特点是黑白对比,所以这个工具边栏要突出黑白变化.经过构思之后,我决定这个边栏的样式

随机推荐