有选择性的重复造一些轮子，未必是件坏事。Aaron的博客上加了一个悬浮菜单，貌似显得很高大上了。虽然这类小把戏也不是头一次见了，但是从未自己写过。今天就选择性的拿这个功能写一写。下面是这个轮子的开发过程，也可以当作是一篇需求文档的分析和实现过程。
演示地址：http://sandbox.runjs.cn/show/to8wdmuy
源码下载：https://github.com/bjtqti/study/tree/master/floatmenu
第一步创建dom节构：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>AppCarrier</title> <link rel="stylesheet" href="menu.CSS"></head><body> <div id="content"> <h1 id="test1">test1</h1> <p>The past can hurt. But you can either run from it or learn from it</p> <p>过去是痛楚的，但你要么逃避，要么从中成长</p> <p>One meets his destiny on the road he takes to avoid it</p> <p>往往在逃避命运的路上，却与之不期而遇</p> <p>Rules are meant to be broken</p> <p>规则就该被打破。</p> <p>Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul.</p> <p>岁月流逝只令容颜苍老，激情不再却使心灵枯萎。</p> <h1 id="test2">test2</h1> <p>只有不断地练习学到的知识，你才能真正掌握它。</p> <p>Live every day to the fullest.</p> <p>尽享每日。</p> <p>Keep your eyes on the stars, and your feet on the ground.</p> <p>志存高远，脚踏实地。</p> <p>Always be up for an unexpected adventure.</p> <p>随时准备开始一场意外冒险吧。</p> <p>Life is full of disappointment. You can't dwell on things. You have to move on.</p> <p>生活常不如意，别沉溺往事，要勇往直前。</p> <p>I'm a free spirit. I can't be caged.</p> <p>我的灵魂是自由的，不该被束缚。</p> <p>Sometimes the heart sees what is invisible to the eye.</p> <p>目不见者，心可感之</p> <p>The simple things are also the most extraordinary things, and only the wise can see them.</p> <p>最平凡的事也是最非凡的事，只有智者才明白。</p> <h1 id="test3">test3</h1> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <h1 id="test4">test4</h1> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> <p>how many xxxxxx</p> </div> <div class="menu" id="menubar"> <p class="static">隐藏</p> <ul> <li><a href="#test1">test1</a></li> <li><a href="#test2">test2</a></li> <li><a href="#test3">test3</a></li> <li><a href="#test4">test4</a></li> </ul> </div> </body><script src="menu.js"></script></html>View Code
第二步准备css文件：
ul { list-style-type: none;}a { text-decoration: none;}/*文章内容区*/#content { width:400px; margin: 0 auto; font-size: 2em;}/*悬浮菜单*/.menu { position: fixed; top:20%; right: 0; width:200px; border: 1px solid gray; border-radius: 5px;}.menu li { height: 2em; line-height: 2em;}.red { color : red;}.hide { display: none;}/*隐藏悬浮菜单*/.slideIn { transform : translate3d(202px, 0, 0); transition-duration : .5s;}/*显示悬浮菜单*/.slideOut { transform : translate3d(0, 0, 0); transition-duration : .5s;}.static { color:#007aff; text-align: center;}/*显示悬浮球*/.toShow { display: block; width: 4.8em; height: 2em; line-height: 2em; border-radius: .5em; border:1px solid gray; transform : translate3d(-5em, 0, 0); transition-duration : 1s;}View Code第三步开始编写js代码：
(function(doc){ //收集各章节的链接位置 var pos = [], //收集菜单上的项目 links = doc.getElementsByTagName('a'), //收集章节的标题 titles = doc.getElementsByTagName('h1'), //悬浮菜单 menu = doc.getElementById('menubar'), //当前选择项 currentItem=null; //添加红色样式 var addClass = function (element){ currentItem && currentItem.removeAttribute('class'); element.setAttribute('class','red'); currentItem = element; }, //网页被卷去的高: getScrollTop = function (){ return Math.ceil(document.body.scrollTop)+1; }, //计算滚动位置 startScroll = function (){ var scrollTop = getScrollTop(), len = titles.length, i = 0; //第一条 if(scrollTop>=0 && scrollTop<pos[0]){ addClass(links[0]); return; } //最后一条 if(scrollTop>=pos[len-1]){ addClass(links[len-1]); return; } //中间 for(;i<len;i++){ if(scrollTop > pos[i] && scrollTop < pos[i+1]){ addClass(links[i]); break; } } }; //点击列表中的链接变色 menu.onclick=function(e){ var target = e.target || e.srcElement; if(target.nodeName.toLowerCase() === 'a'){ //列表项状态指示 addClass(target); return; } if(target.nodeName.toLowerCase() === 'p'){ if(target.className == 'static'){ //隐藏菜单 this.className = 'menu slideIn';
新闻热点
疑难解答
