仿百度百科的页面导航效果

这周不小心看到了百度百科的页面导航效果，感觉挺不错的，周末抽空写了下。

下图为导航部分的效果图：

css和图片都是抄百度的，可从附件下载。

具体的代码如下：

20131128 改进版；

暂不支持IE6

<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');
        }
    })

评论

7 楼 ch2004 2015-02-16  

6 楼 y_hai_n 2014-07-18  

需要再加一个jquery.min.js，效果就出来了，谢谢分享

5 楼 town2you 2014-05-20  

代码很好用，谢谢！不过有个小问题不知道怎么弄：右边导航栏是固定在页面的底部的，但是把网页拉到最底部的时候，右边导航栏会被网站页脚挡住（重叠）。

百度百科的页面是没问题的，他的页脚会把右侧导航自动往上顶。可以帮忙解决这个吗？非常感谢！

4 楼 town2you 2014-05-19  

很好用，谢谢了！

3 楼 happy_linger 2014-04-08  

看到了，谢谢

2 楼 happy_linger 2014-04-08  

能不能把html也贴出来啊

1 楼 shma1664 2013-11-11  

很好 收藏啦