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

Question

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

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

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

Answer 1

概括的来说就是：把页面上 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('<div id="menuIndex"></div>');
        $('#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);
    }

Answer 2

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

这个应用的是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')
});