1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" /> 6 <title></title> 7 <script type="text/javascript" src="jquery-2.0.3.min.js"></script> 8 9 <style type="text/css"> 10 body,p,div,ul,li{margin:0px;padding:0px;} 11 .nav{border:1px solid green;position:relative;height:30px;} 12 13 .nav ul{list-style-type:none;height:30px;background:#333;} 14 15 .nav ul li{float:left;width:100px;text-align:center;height:30px;line-height:30px;} 16 17 .nav ul li a:link{color:white;text-decoration:none;} 18 19 .nav ul li a{display:block;} 20 21 .nav ul li a:hover{background:#f60;} 22 23 .show{background:#f60;} 24 25 .fixednav{position:fixed;top:0px;left:0px;width:100%; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); 26 transition-duration: 0ms; 27 transform: translate(0px, 0px) translateZ(0px);} 28 29 .nav ul li>ul li{background:blue;} 30 .content{ 31 height: 1000px; 32 width: 1000px; 33 background: red; 34 } 35 </style> 36 <script type="text/javascript"> 37 38 $(function() { 39 var navOffset=$(".nav").offset().top; 40 console.log(navOffset); 41 $(window).scroll(function(){ 42 var scrollPos=$(window).scrollTop(); 43 if(scrollPos >=navOffset){ 44 console.log(1111); 45 $(".nav").addClass("fixednav"); 46 }else{ 47 $(".nav").removeClass("fixednav"); 48 } 49 }); 50 51 }); 52 53 </script> 54 </head> 55 <body> 56 <div class="navTmp" style="height:1000px;"> 57 <p>cs</p> 58 59 <p>cs</p> 60 <p>cs</p> 61 62 <p>cs</p><p>cs</p> 63 64 <p>cs</p><p>cs</p> 65 66 <p>cs</p><p>cs</p> 67 68 <p>cs</p><p>cs</p> 69 70 <p>cs</p><p>cs</p> 71 72 <p>cs</p> 73 <p>cs</p> 74 </div> 75 76 <div class="nav"> 77 78 <ul> 79 80 <li class="show"><a href="#">index</a></li> 81 82 <li><a href="#">1024</a> 83 84 <ul style="display:none;"> 85 86 <li><a href="#">code</a></li> 87 88 <li><a href="#">node</a></li> 89 90 <li><a href="#">react</a></li> 91 92 </ul> 93 94 </li> 95 96 <li><a href="#">webpack</a></li> 97 98 <li><a href="#">postgresql</a></li> 99 100 </ul> 101 102 </div> 103 <div class="content"> 104 content 105 </div> 106 107 </body> 108 </html>