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>