网页固定头部功能

固定头功能实现步骤：

1、写出固定到头部的结构与样式
2、通过js或jq动态显示
分析：
    事件源：window document
    事件类型：onscroll(js)、scroll(jq)
    事件处理函数：
        获取滚动条距离顶部的距离
        判断距离：>500显示固定头部
            else隐藏固定头部
        细节：
            如果显示固定头部（把头部中的搜索框放入固定头部的盒子）
            如果隐藏固定头部（把固定头部中的搜索框放入头部）

HTML结构

头部

<div class="header-center fl">
          <form action="#" class="search">
            <input type="text" />
            <button type="button">搜索</button>
          </form>
          <div class="hot-search">
            <span>热门搜索:</span>
            <a href="#" style="color: red">周期配送</a>|