Javascript-元素在滚动条滑动一定高度后自动置顶 

 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>

 

posted @ 2016-07-30 18:32  YanEr、  阅读(4102)  评论(0)    收藏  举报