84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
看使用Github Pages建独立博客这篇文章时, 发现往下浏览内容时, 每经过一个标题时, 右边目录中相应的标题会被高亮显示, 这个是怎么实现的?
至于目录在右边这种效果, 我在看了页面源码之后已经知道怎么实现的了, 这个不用大家解答.
本人没有系统的学过html、css、javascript, 所以希望大牛回答的通俗简单点.
业精于勤,荒于嬉;行成于思,毁于随。
概括的来说就是:把页面上 h2,h3的内容收集起来,然后依照 文档大纲 嵌入 li 中,然后注册全局的 onscroll 事件
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); }
额,你这标题也太题不对文了吧....
这个应用的是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') });
概括的来说就是:把页面上
h2
,h3
的内容收集起来,然后依照文档大纲
嵌入li
中,然后注册全局的onscroll
事件代码在这里:
额,你这标题也太题不对文了吧....
这个应用的是css中的position:fixed.
我也不太懂css,只知道这个position:fixed是跟浏览器挂钩的.
始终跟随浏览器. 当然还需要配合top, left, right, bottom这些.
详情自己google 下
------
代码在此http://beiyuu.com/js/post.js