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