search

Home  >  Q&A  >  body text

javascript - 如何识别网页中当前内容所在的标题?

看使用Github Pages建独立博客这篇文章时, 发现往下浏览内容时, 每经过一个标题时, 右边目录中相应的标题会被高亮显示, 这个是怎么实现的?

至于目录在右边这种效果, 我在看了页面源码之后已经知道怎么实现的了, 这个不用大家解答.

本人没有系统的学过html、css、javascript, 所以希望大牛回答的通俗简单点.

迷茫迷茫2776 days ago481

reply all(2)I'll reply

  • 怪我咯

    怪我咯2017-04-10 12:46:57

    概括的来说就是:把页面上 h2,h3的内容收集起来,然后依照 文档大纲 嵌入 li 中,然后注册全局的 onscroll 事件

    代码在这里:

    var ie6 = ($.browser.msie && $.browser.version=="6.0") ? true : false;
        if($('h2',$('#content')).length > 2 && !isMobile.any() && !ie6){
            var h2 = [],h3 = [],tmpl = '<ul>',h2index = 0;
    
            $.each($('h2,h3',$('#content')),function(index,item){
                if(item.tagName.toLowerCase() == 'h2'){
                    var h2item = {};
                    h2item.name = $(item).text();
                    h2item.id = 'menuIndex'+index;
                    h2.push(h2item);
                    h2index++;
                }else{
                    var h3item = {};
                    h3item.name = $(item).text();
                    h3item.id = 'menuIndex'+index;
                    if(!h3[h2index-1]){
                        h3[h2index-1] = [];
                    }
                    h3[h2index-1].push(h3item);
                }
                item.id = 'menuIndex' + index
            });
    
            //添加h1
            tmpl += '<li class="h1"><a href="#" data-top="0">'+$('h1').text()+'</a></li>';
    
            for(var i=0;i<h2.length;i++){
                tmpl += '<li><a href="#" data-id="'+h2[i].id+'">'+h2[i].name+'</a></li>';
                if(h3[i]){
                    for(var j=0;j<h3[i].length;j++){
                        tmpl += '<li class="h3"><a href="#" data-id="'+h3[i][j].id+'">'+h3[i][j].name+'</a></li>';
                    }
                }
            }
            tmpl += '</ul>';
    
            $('body').append('<p id="menuIndex"></p>');
            $('#menuIndex').append($(tmpl)).delegate('a','click',function(e){
                e.preventDefault();
                var scrollNum = $(this).attr('data-top') || $('#'+$(this).attr('data-id')).offset().top;
                //window.scrollTo(0,scrollNum-30);
                $('body','html').animate({ scrollTop: scrollNum-30 }, 400, 'swing');
            })
    
            $(window).load(function(){
                var scrollTop = [];
                $.each($('#menuIndex li a'),function(index,item){
                    if(!$(item).attr('data-top')){
                        var top = $('#'+$(item).attr('data-id')).offset().top;
                        scrollTop.push(top);
                        $(item).attr('data-top',top);
                    }
                });
    
                $(window).scroll(function(){
                    var nowTop = $(window).scrollTop(),index,length = scrollTop.length;
                    if(nowTop+60 > scrollTop[length-1]){
                        index = length
                    }else{
                        for(var i=0;i<length;i++){
                            if(nowTop+60 <= scrollTop[i]){
                                index = i
                                break;
                            }
                        }
                    }
                    $('#menuIndex li').removeClass('on')
                    $('#menuIndex li').eq(index).addClass('on')
                });
            });
    
            //用js计算屏幕的高度
            $('#menuIndex').css('max-height',$(window).height()-80);
        }

    reply
    0
  • PHPz

    PHPz2017-04-10 12:46:57

    额,你这标题也太题不对文了吧....

    这个应用的是css中的position:fixed.

    我也不太懂css,只知道这个position:fixed是跟浏览器挂钩的.

    始终跟随浏览器. 当然还需要配合top, left, right, bottom这些.

    详情自己google 下

    ------
    代码在此http://beiyuu.com/js/post.js

     $(window).scroll(function(){
    var nowTop = $(window).scrollTop(),index,length = scrollTop.length;
    if(nowTop+60 > scrollTop[length-1]){
    index = length
    }else{
    for(var i=0;i<length;i++){
    if(nowTop+60 <= scrollTop[i]){
    index = i
    break;
    }
    }
    }
    $('#menuIndex li').removeClass('on')
    $('#menuIndex li').eq(index).addClass('on')
    }); 

    reply
    0
  • Cancelreply