借一例固定菜单栏！！！ 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 6     <title>positionSticky</title>
 7     <style>
 8         * {margin: 0;padding: 0;}
 9         .header {width: 100%;height: 100px;background: red;}
10         .container {width: 100%;height: 1000px;background: #ccc;}
11         .liveDiv {top: 0;width: 100%;height: 50px;background: green;}
12         .sticky {position: -webkit-sticky;position: -moz-sticky;position: -ms-sticky;position: -o-sticky;position: sticky;}
13         .scale {transform: scale(0.5);transform-origin: 0% 0%;}
14     </style>
15     <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script>
16 </head>
17 <body>
18 <div class="header"></div>
19 <div class="container">
20     <div class="liveDiv"></div>
21 </div>  
22 <script>
23 /*
24  * 菜单移动到顶部后定位在顶部
25  * message[菜单的id名或者class类名]
26  * height[菜单距离顶部的距离]
27  */
28 function navChangeArea(message, height) {
29     var liveDiv = $("#" + message).length ? $("#" + message) : $("." + message);
30     if(/android/i.test(navigator.userAgent)){
31         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
32         if (scrollTop < height) {
33             liveDiv.css("position", "relative");
34         } else {
35             liveDiv.css("position", "fixed");
36         }
37     }
38     if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
39         liveDiv.addClass("sticky");
40     }
41 }
42 $(window).bind("scroll", function() {
43     navChangeArea("liveDiv", 100);
44 });
45 $(window).bind("touchmove", function() {
46     navChangeArea("liveDiv", 100);
47 });
48 </script> 
49 </body>
50 </html>

 

posted @ 2018-06-04 16:07  张郎会飞  阅读(146)  评论(0)    收藏  举报