仿腾讯固定导航栏 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>防腾讯固定导航栏</title>
 6     <style type="text/css">
 7         *{margin:0;padding:0;}
 8         .main{
 9             width: 1000px;
10             margin:0 auto;
11             margin-top: 20px;
12         }
13     </style>
14     <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
15     <script type="text/javascript">
16         $(function () {
17             var H = $(".top").height();
18             $(window).scroll(function () {
19                 var docSccrollTop = $(document).scrollTop();
20                 if(docSccrollTop > H){
21                     $(".nav").css({"position":"fixed","top":0});
22                     // 此时 nav的位置固定，如果不设置 main部分的margin-top的话，将有一部分内容被挡住 nav的高度+开始设置的20
23                     $(".main").css("margin-top",106);
24                 }else{
25                     $(".nav").css({"position":"static"});  /*静态定位*/
26                     $(".main").css("margin-top",20);
27                 }
28             });
29         });
30     </script>
31 </head>
32 <body>
33 <div class="top">
34     <img src="images/top.png" />
35 </div>
36 <div class="nav">
37     <img src="images/nav.png" />
38 
39 </div>
40 <div class="main">
41     <img src="images/main.png" />
42 </div>
43 </body>
44 </html>

 

posted @ 2018-01-01 22:18  前端极客  阅读(1711)  评论(0)  编辑  收藏  举报