《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.13　技巧：将footer的位置保持固定...-优快云博客

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.13节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看

9.13　技巧：将footer的位置保持固定

在1.1之前的jQuery Mobile版本，滚动页面时，footer会暂时消失，停止滚动后又会显现。在引进1.1版本之后，header和footer停留在页面的顶部和底部。然而，如果header和footer可以保持在同一个位置而只是内容区域在滚动，那将会更加优美。这样固定工具栏（fixed toolbar）就开始被使用了。代码清单9-15演示了如何使用固定工具栏。

代码清单9-15　滚动文本而不移动footer的位置

00 <!DOCTYPE html> 
01 <html> 
02 <head> 
03　　<title>Fixed Position</title> 
04　　<meta name="viewport" 
05　　　 content="width=device-width, initial-scale=1"> 
06　　<link rel="stylesheet" href=
07　　　 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08　　<script type="text/javascript"
09　　　 src="http://code.jquery.com/jquery-1.7.1.min.js">
10　　</script>
11　　<script type="text/javascript" src=
12　　　 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13　　</script>
14 <script>
15 $.mobile.fixedToolbars
16　　　.show(true);
17 $.mobile.touchOverflowEnabled = true;
18 </script>
19 
20 </head> 
21 <body> 
22 
23 <div data-role="page">
24 
25　 <div data-role="header" data-position="fixed">
26　　 <h1>Fixed Position</h1>
27　 </div>
28 
29　 <div data-role="content" >　
30　　 <p>
31　　　 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
32　　　 metus tellus, iaculis vestibulum ornare sit amet, semper ac
33　　　 nisi. Suspendisse convallis, libero ut sodales interdum,
34　　　 turpis ligula lacinia justo, a accumsan tellus est at lacus.
35　　　 Morbi ultricies posuere enim, sit amet luctus massa faucibus
36　　　 ut. Maecenas vel mi quis massa volutpat consequat ac non mi.
37　　　 Nam et ornare sapien. Donec vitae magna sed neque lacinia
38　　　 imperdiet. Vivamus tellus velit, molestie in interdum vel,
39　　　 gravida vel mauris. Vivamus justo augue, ultrices ut viverra-
40　　　 ut, sollicitudin id lacus. Integer ornare massa ut risus-
41　　　 tempus lobortis. Donec ac nisi eu nunc volutpat posuere
42　　　 dapibus ut nisi. Nam sit amet mauris a ante vehicula mattis.
43　　　 Phasellus rutrum rutrum enim, at convallis neque convallis eu.
44　　　 Duis dictum justo venenatis mauris feugiat quis aliquam enim-
45　　　 egestas. Integer et ante metus, ut faucibus libero.
46　　 </p>
47　　　 
48　　 <p>
49　　　 Sed lobortis nunc nec ligula dictum dignissim pellentesque
50　　　 lorem semper. Vivamus dui felis, pulvinar non accumsan ac,
51　　　 facilisis a lectus. In blandit aliquet sapien sed eleifend.
52　　　 Mauris ut arcu nisl. Morbi eget sapien vulputate lectus
53　　　 dapibus congue. Cras id odio nulla, quis viverra massa. Mauris
54　　　 tortor nisl, tincidunt et vestibulum nec, blandit ut purus. In
55　　　 vel massa a erat tristique lacinia. Vestibulum malesuada
56　　　 tristique nunc, in dictum quam faucibus a. Etiam sed enim
57　　　 ante, et aliquam quam. Donec velit velit, cursus at sodales
58　　　 id, accumsan at sapien.
59　　 </p>
60　 </div>
61　 <div data-role="footer" data-position="fixed">
62　　　　<p>Fixed footer</p>
63　 </div>
64　 
65 </div>
66 
67 
68 </body>
69 </html>

第16行和第17行确保了header和footer在屏幕的顶部和底部，而不是content的顶部和底部。第17行设置touchOverflowEnabled为true1。这行语句将可滚动区域限制为页面的content部分。