本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.12节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
9.12 技巧：跨页面时固定footer
点击链接时，在页面发生变化期间会触发动画。有些情形下你并不想让footer成为动画的一部分。代码清单9-14演示了当链接至别的页面时如何将footer保持在同一个地方。
代码清单9-14 当页面发生变化时固定footer
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>Fixed Footer</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
15 </head>
16 <body>
17 <div data-role="page">
18
19 <div data-role="header">
20 <h1>First</h1>
21 </div>
22
23 <div data-role="content">
24 <p>Go to the <a href="#second">second page</a></p>
25 </div>
26
27 <div data-role="footer" data-id="myfooter" data-position="fixed">
28 <p>First page</p>
29 </div>
30
31 </div>
32 <div data-role="page" data-add-back-btn="true" id="second">
33
34 <div data-role="header">
35 <h1>Second</h1>
36 </div>
37
38 <div data-role="content">
39 <p>Content</p>
40 <p>More text</p>
41
42 </div>
43 <div data-role="footer" data-id="myfooter" data-position="fixed">
44 <p>Second page</p>
45 </div>
46
47 </div>
48
49 </body>
50 </html>
第27行和第43行都包含了data-position="fixed"属性。点击链接时，你看到了header和content区域的动画，但footer保持固定。但是你的确看到footer的内容发生了变化。
