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>
