鼠标滚动时置顶的搜索框特效

一款鼠标滚动时置顶的搜索框特效，当鼠标向下滚动到指一定位置时，搜索框自动和菜单图标组合起来固定在页面的最顶部，当鼠标向上滚动到一定位置时，搜索框恢复到原来的状态。

分类：表单代码 > 搜索框难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，设置好各类元素的对应容器即可，代码如下：

<div class="wrap" id="wrap">
  <header class="top-header">
    <span class="menu-icon">☰</span>
  </header>
  <div class="search">
    <input type="search" placeholder="请输入搜索内容" />
  </div>
  <div class="top">
    <div class="hero"></div>
  </div>
  <main>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </main>
</div>

页面的底部，需引入jQuery库和必要的JS文件，代码如下：

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>