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