scrollTo(x,y)//可把内容滚动到指定的坐标
scrollTo(xpos,ypos)//x,y值必需

1、固定导航栏

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>固定导航栏</title>
 6     <script src="my.js" type="text/javascript"></script>
 7     <style>
 8       *{
 9           margin: 0;
10           padding: 0;
11       }
12        img{
13            vertical-align: top;
14        }
15         .main{
16             margin: 0 auto;
17             width: 1000px;
18             margin-top: 10px;
19         }
20         .fixed{
21             position: fixed;
22             top:0;
23             left:0;
24         }
25     </style>
26 </head>
27 <body>
28         <div class="top" id="Q-top">
29             <img src="images/top.png" alt="">
30         </div>
31         <div class="nav" id="Q-nav">
32             <img src="images/nav.png" alt="">
33         </div>
34         <div class="main">
35             <img src="images/main.png" alt="">
36         </div>
37 
38 </body>
39 </html>
40 <script>
41     var nav=$("Q-nav");
42     var navTop=nav.offsetTop;//导航栏距离顶部的距离
43     //alert(navTop);
44     window.onscroll=function(){
45         //console.log(scroll().top);
46         if(scroll().top>=navTop){
47             nav.className="nav fixed";
48         }else{
49             nav.className="nav";
50         }
51     }
52 </script>
View Code

相关文章: