看使用Github Pages建独立博客这篇文章时, 发现往下浏览内容时, 每经过一个标题时, 右边目录中相应的标题会被高亮显示, 这个是怎么实现的?
至于目录在右边这种效果, 我在看了页面源码之后已经知道怎么实现的了, 这个不用大家解答.
本人没有系统的学过html、css、javascript, 所以希望大牛回答的通俗简单点.
怪我咯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); }
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') });