固定头功能实现步骤:
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>|