纯手工打造悬浮菜单

有选择性的重复造一些轮子，未必是件坏事。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