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>
