1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <meta charset="utf-8" />
7 <style type="text/css">
8 * { margin: 0; padding: 0; border: 0; }
9 .top { width: 100%; height: 30px; margin: 0 auto; text-align: center; background-color: #808080; color: #ffffff; margin-bottom: 20px; }
10
11 .cen, .search, .search li { width: 1200px; height: 40px; margin: 0 auto; }
12 .cen { width: 100%; height: 50px; background-color: #ffffff; z-index: 10; }
13 .cen .search { background-color: #ff6a00; border-radius: 20px; }
14 .cen .search input { width: 1100px; height: 25px; margin-left: 50px; margin-top: 10px; background: none; outline: none; font-size: 14px; color: #000000; }
15 input::-webkit-input-placeholder { color: #808080; }
16 input:-moz-placeholder { color: #808080; }
17
18 .con { width: 1200px; height: 1500px; margin: 0 auto; text-align: center; background-color: #ffd800; }
19 </style>
20 <script src="js/jquery-1.10.2.js"></script>
21 </head>
22
23 <body>
24 <div class="top">顶部内容</div>
25
26 <div class="cen"><!--这里注意一定要用一个宽100%的外框框起来，否则会影响美观，整体元素也会在固定置顶时靠左浮动-->
27 <div class="search"><!--这里在用一个宽为1200的元素将内容居中到页面-->
28 <input type="text" placeholder="请输入您需要查找的内容..." />
29 </div>
30 </div>
31
32 <div class="con">页面内容</div>
33
34 <script type="text/javascript">
35 //search在滚动条下滑一定高度后固定置顶
36 var titleH = $(".cen").offset().top; //获取滚动条下滑高度（即search固定置顶的条件）
37 $(window).scroll(function () { //window滚动条事件
38 var scroH = $(this).scrollTop(); //获取滚动条滑动的距离
39 if (scroH > titleH) { //判断滚动条滑动高度是否大于指定条件高度
40 $(".cen").css({ "position": "fixed", "top": 0 }); //大于就执行search固定置顶
41 } else if (scroH <= titleH) { //小于等于指定条件高度
42 $(".cen").css({ "position": "static" }); //则就恢复原位
43 }
44 });
45 </script>
46
47
48 </body>
49 </html>
