第十九节 jQuery使用滚动距离和事件制作置顶菜单

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style type="text/css">
  7         body{
  8             margin: 0;
  9         }
 10         .banner{
 11             width: 960px;
 12             height: 200px;
 13             background-color: cyan;
 14             margin: 0 auto;
 15         }
 16         .menu{
 17             width: 960px;
 18             height: 100px;
 19             background-color: gold;
 20             margin: 0 auto;
 21             text-align: center;
 22             line-height: 80px;
 23         }
 24         .menu_back{
 25             width: 960px;
 26             height: 100px;
 27             margin: 0 auto;
 28             display: none;
 29         }
 30         p{
 31             text-align: center;
 32             color: red;
 33         }
 34         .totop{
 35             height: 60px;
 36             width: 60px;
 37             background-color: gold;
 38             color: #fff;
 39             position: fixed;
 40             right: 20px;
 41             bottom: 50px;
 42             line-height: 60px;
 43             text-align: center;
 44             font-size: 40px;
 45             border-radius: 50%;
 46             cursor: pointer;
 47             display: none;
 48 
 49         }
 50     </style>
 51     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
 52     <script type="text/javascript">
 53         $(function(){
 54             var $menu = $('.menu');
 55             var $menu_back = $('.menu_back');
 56             var $totop = $('.totop');
 57 
 58             $totop.click(function(){
 59                 $('html,body').animate({'scrollTop':0},100);
 60             });
 61             $(window).scroll(function(){
 62                 var iNum = $(document).scrollTop();
 63                 if (iNum>200) 
 64                 {
 65                     $menu.css({
 66                         'position':'fixed',
 67                         'left':'50%',
 68                         'top':0,
 69                         'marginLeft':-480
 70                     }) 
 71                     $menu_back.show();
 72                     $totop.show();
 73                 }
 74                 else
 75                 {
 76                     $menu.css({
 77                         'position':'static',
 78                         'marginLeft':'auto'
 79                     })
 80                     $menu_back.hide();
 81                     $totop.hide();
 82                 }
 83             });
 84         });
 85     </script>
 86 </head>
 87 <body>
 88     <div class="banner"></div>
 89     <div class="menu">菜单</div>
 90     <div class="menu_back"></div>  
 91     <!-- 解决菜单栏处于绝对定位脱离文档流时的bug，设置一个同样大小的div进行占位 -->
 92     <div class="totop">↑</div>
 93 
 94     <p>文档内容</p>
 95     <br>
 96     <br>
 97     <br>
 98     <br>
 99     <br>
100     <br>
101     <br>
102     <br>
103     <br>
104     <br>
105     <br>
106     <br>
107     <p>文档内容</p>
108     <br>
109     <br>
110     <br>
111     <br>
112     <br>
113     <br>
114     <br>
115     <br>
116     <br>
117     <br>
118     <br>
119     <br>
120     <p>文档内容</p>
121     <br>
122     <br>
123     <br>
124     <br>
125     <br>
126     <br>
127     <br>
128     <br>
129     <br>
130     <br>
131     <br>
132     <br>
133     <p>文档内容</p>
134     <br>
135     <br>
136     <br>
137     <br>
138     <br>
139     <br>
140     <br>
141     <br>
142     <br>
143     <br>
144     <br>
145     <br>
146     <p>文档内容</p>
147     <br>
148     <br>
149     <br>
150     <br>
151     <br>
152     <br>
153     <br>
154     <br>
155     <br>
156     <br>
157     <br>
158     <br>
159     <p>文档内容</p>
160 </body>
161 </html>