我想像这样浏览这些页面，但是当它发生时，我希望页眉面板和页脚保持静止。我只希望在刷页或更改页面时移动页面内容。
JSFiddle：https://jsfiddle.net/nj3prx5h/
HTML：
<div data-role="header" data-position="fixed">
<h1 style="text-align:left; margin-left:40px;">Rates</h1>
<a href="#bars3" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a>
</div><!-- /header -->
<div data-role="content">
<h4 align="center">2015 Rates</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#Rates" class="ui-btn-active ui-state-persist">Rates</a></li>
<li><a href="#StayandPlay">Stay & Play</a></li>
<li><a href="#MemberSpecials">Specials</a></li>
</ul>
</nav>
</div><!-- /footer -->
<div data-role="panel" id="bars3" data-theme="a">
<!-- panel content goes here -->
<ul data-role="listview" class="ui-listview-outer">
<li><a href="#Home" data-transition="fade">Home</a></li>
<li><a href="#TeeTimes" data-transition="fade">Book Tee Times</a></li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2>Rates</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li><a href="#Rates" data-transition="fade">2015 Rates</a></li>
<li><a href="#StayandPlay" data-transition="fade">Stay & Play</a></li>
<li><a href="#MemberSpecials" data-transition="fade">Specials</a></li>
</ul>
</li>
<li><a href="#Scorecard" data-transition="fade">Scorecard</a></li>
<li><a href="#ContactUs" data-transition="fade">Contact Us</a></li>
</ul>
</div><!-- /panel -->
</div><!-- end of Rates page -->
<!-- ~~~~~ Stay and Play ~~~~~ -->
<div data-role="page" id="StayandPlay">
<div data-role="header" data-position="fixed">
<h1 style="text-align:left; margin-left:40px;">Rates</h1>
<a href="#bars4" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a>
</div><!-- /header -->
<div data-role="content">
<h4 align="center">Stay & Play</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#Rates" >Rates</a></li>
<li><a href="#StayandPlay" class="ui-btn-active ui-state-persist">Stay & Play</a></li>
<li><a href="#MemberSpecials" >Specials</a></li>
</ul>
</nav>
</div><!-- /footer -->
<div data-role="panel" id="bars4" data-theme="a">
<!-- panel content goes here -->
<ul data-role="listview" class="ui-listview-outer">
<li><a href="#Home" data-transition="fade">Home</a></li>
<li><a href="#TeeTimes" data-transition="fade">Book Tee Times</a></li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2>Rates</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li><a href="#Rates" data-transition="fade">2015 Rates</a></li>
<li><a href="#StayandPlay" data-transition="fade">Stay & Play</a></li>
<li><a href="#MemberSpecials" data-transition="fade">Specials</a></li>
</ul>
</li>
<li><a href="#Scorecard" data-transition="fade">Scorecard</a></li>
<li><a href="#ContactUs" data-transition="fade">Contact Us</a></li>
</ul>
</div><!-- /panel -->
</div><!-- end of Stay and Play page -->
<!-- ~~~~~ SPECIALS ~~~~~ -->
<div data-role="page" id="MemberSpecials">
<div data-role="header" data-position="fixed">
<h1 style="text-align:left; margin-left:40px;">Rates</h1>
<a href="#bars5" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a>
</div><!-- /header -->
<div data-role="content">
<h4 align="center">2015 New Member Specials</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#Rates">Rates</a></li>
<li><a href="#StayandPlay">Stay & Play</a></li>
<li><a href="#MemberSpecials" class="ui-btn-active ui-state-persist">Specials</a></li>
</ul>
</nav>
</div><!-- /footer -->
<div data-role="panel" id="bars5" data-theme="a">
<!-- panel content goes here -->
<ul data-role="listview" class="ui-listview-outer">
<li><a href="#Home" data-transition="fade">Home</a></li>
<li><a href="#TeeTimes" data-transition="fade">Book Tee Times</a></li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2>Rates</h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li><a href="#Rates" data-transition="fade">2015 Rates</a></li>
<li><a href="#StayandPlay" data-transition="fade">Stay and Play</a></li>
<li><a href="#MemberSpecials" data-transition="fade">Specials</a></li>
</ul>
</li>
<li><a href="#Scorecard" data-transition="fade">Scorecard</a></li>
<li><a href="#ContactUs" data-transition="fade">Contact Us</a></li>
</ul>
</div><!-- /panel -->
</div><!-- end of Specials page -->
JS：
jQuery(document).ready(function() {
$(document).on('swipeleft', swipeLeft);
$(document).on('swiperight', swipeRight);
function swipeLeft(event) {
if ($.mobile.pageContainer.pagecontainer('getActivePage').attr('id') === "Rates") {
$.mobile.changePage("#StayandPlay", {
transition: "slide"
});
} else if ($.mobile.pageContainer.pagecontainer('getActivePage').attr('id') === "StayandPlay") {
$.mobile.changePage("#MemberSpecials", {
transition: "slide"
});
}
}
function swipeRight(event) {
if ($.mobile.pageContainer.pagecontainer('getActivePage').attr('id') === "MemberSpecials") {
$.mobile.changePage("#StayandPlay", {
transition: "slide",
reverse: true
});
} else if ($.mobile.pageContainer.pagecontainer('getActivePage').attr('id') === "StayandPlay") {
$.mobile.changePage("#Rates", {
transition: "slide",
reverse: true
});
}
}
});
我该怎么做？我更担心页脚看起来更糟糕，但如果我能得到页脚和页眉面板的帮助那就太棒了！