导航滚动后固定 

  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>

 

posted @ 2016-10-24 15:14  卡西法儿  阅读(185)  评论(0)    收藏  举报