我正在使用带有jquery mobile 1.4的phone-gap / cordova 2.9.0创建Android应用程序 我正在使用幻灯片转换进行导航，但是当我导航时，页面主体会根据需要正常移动，但页眉和页脚不会滑动。幻灯片动画完成后它们会发生变化而没有任何影响 怎么解决这个？请帮忙！！！ 这是我的第一页 位置偏好
<script src="yorkJs/jquery.blockUI.js"></script>
<link rel="stylesheet" href="yorkCss/jquery.mobile-1.4.0.css" />
<link rel="stylesheet" href="css/yorkchiller.css" />
<script type="text/javascript" src="js/core/iscroll.js"></script>
<script type="text/javascript" src="js/core/iscroll.stickyheaders.js"></script>
<script src="yorkJs/yorkFilters.js"></script>
<script src="yorkJs/yorkSelectionParameters.js"></script>
<script src="yorkJs/YorkChillerMain.js"></script>
<script src="yorkJs/yorkModelSpecification.js"></script>
<link rel="stylesheet" href="css/yorkchiller2.css" />
<script type="text/javascript">
$.mobile.defaultPageTransition = 'slide';
$(document).bind('mobileinit', function () {
$.mobile.activeBtnClass = 'unused';
$.mobile.touchOverflowEnabled=true;
});
</script>
<script type="text/javascript" src="phonegap/cordova.js"></script>
<script type="text/javascript" src="js/biz/EmailComposer.js"></script>
</head>
<body >
<div data-role="page" id="selectionParameters" style="height:100%;">
<div data-role="header" data-position="fixed" data-tap-toggle="false" id="header">
<div style="vertical-align: middle;padding-top:3px; padding-bottom:4px;" align="center">
<img src="images/York_Logo.png" align="middle" height="30px" width="110px" />
</div>
</div>
<div role="main" class="ui-content" >
<div style="height:auto; background-color:white">
<div data-role="tabs" >
<div data-role="navbar" class="custom-navbar" id="chillertypeNavbar">
<ul>
<li class="ui-block-a-custom" id="liAll" value="0"><a href="#fragment-1" id="custom-li-1" class="ui-btn-active custom-ui-a1 ui-btn-nopadding">All</a></li>
<li class="ui-block-b-custom" id="liAir" value="1"><a href="#fragment-2" id="custom-li-2" class="custom-ui-a2 ui-btn-nopadding" >Air Cooled</a></li>
<li class="ui-block-c-custom" id="liWater" value="2"><a href="#fragment-3" id="custom-li-3" class="custom-ui-a3 ui-btn-nopadding" >Water Cooled</a></li>
</ul>
</div>
</div>
<div id="divpreferences" >
<ul data-role="listview" data-inset="true" id="listPreferences">
<li class="ui-corner-all1" style="height:80px !important;" id="capacitylink">
<a href="yorkCapacitySelection.html" data-transition="slide" data-prefetch class="custom-list-a1" style="vertical-align: middle;border-top-width: 0 !important;">
<img src="yorkImages/Capacity.png" class="imgLocationIcon" width="45px" height="auto" style="padding-left:0px; padding-top:4px;">
<span class="ui-li-count ui-li-count-cutom" style="color:#3388CC; font-weight:700; border: none;" id="selPercentage"></span>
<p style="font-size:18px;font-weight:normal;vertical-align: middle;padding-top: 20px;margin-left:-0.7em !important;">Capacity / Tolerance</p>
<p style="font-size:12px;font-weight:lighter;vertical-align:middle; width:200px; margin-left:-1em !important; " id="selCapacity">Select chiller capacity and tolerance</p>
</a>
<div style="width:80%; height:1px; border-bottom: 1px solid #DDDDDD;float:right; "> </div>
<div class="newrow"> </div>
</li>
<li class="ui-corner-all1" id="voltagelink">
<a href="yorkVoltageSelection.html" data-transition="slide" data-prefetch class="custom-list-a2" style="border-top-width: 0 !important;border-bottom-width: 0 !important">
<img src="yorkImages/Line_Frequency.png" class="imgLocationIcon" width="45px" height="auto" style="padding-left:0px; padding-top:4px;">
<p style="font-size:18px;font-weight:normal;vertical-align:middle;padding-top: 20px; margin-left:-0.7em !important;">Line Frequency / Voltage</p>
<p style="font-size:12px;font-weight:lighter;vertical-align:middle; width:250px; margin-left:-1em !important;" id="selVoltage">Select chiller line frequency and voltage</p>
</a>
<div style="width:80%;height:1px; border-bottom: 1px solid #DDDDDD;float:right; "> </div>
<div class="newrow"> </div>
</li>
<li class="ui-corner-all1" data-icon="false">
<a href="" style="border-top-width: 0 !important;border-bottom-width: 0 !important; border:0; background-color:white">
<p style="word-break: normal; white-space: normal; font-size:12px;font-weight:lighter;vertical-align:middle; padding-left:10px; margin-left:-1em !important;"> NOTE: Chillers shown are available only in the United States and Canada </p>
</a>
<div style="width:100%;height:1px; border-bottom: 0px solid #DDDDDD;float:right;"> </div>
<div class="newrow"> </div>
</li>
</ul>
</div>
</div>
<div id="bottomBtn" style="bottom:36px; z-index:1; float: left; position: fixed; padding-left:5px;padding-right: 5px;width: 100%; background-color:white;"> <!-- bottom:36px -->
<!--<input value="Search Fillter" type="button" onclick="yorkChillerList.html" style="width: 100%"> -->
<a href="" id="btnSearchFilter" data-role="button" style="position:relative; display:none; z-index:1; background: #3c92cb; color: white; font-size:20px;font-weight:500; padding-top:0.4em !important; padding- bottom:0.4em !important;">Search Chillers</a>
</div>
</div>
<div data-role="popup" data-history="false" data-dismissible="false" id="about" data-theme="a" class="ui-corner-all" data-overlay-theme="b" style="background-color:#E8E8E8; border-top-right-radius:7px !important; border-top-left-radius:7px !important; border:7px #000000" >
<form>
<div style="font-size:14px;padding:15px;text-align:center; border-radius:7px; width:100%;font-weight:normal; background-color:#E8E8E8;">
Chillers shown are available only in the United States and Canada
</div>
<div style="background-color:#E8E8E8; color:#007BFF !important; border-top:1px solid #c2c2c2; padding:10px; text-align:center; border-bottom-right-radius:7px !important; border-bottom-left-radius:7px !important;">
<a href="#" style="text-align:center;" data-rel="back">OK</a>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed" id="footer" data-theme="a" data-tap-toggle="false" style="z-index:1; background-color:white;">
<div data-role="navbar">
<ul>
<li><a href="" id="Homebtn" data-direction="reverse" class="ui-btn-activeown" style="padding-top:2px !important; background-image: linear-gradient(#DBD9DA, #FCFAFB) !important; height:35px !important;">
<img src="images/Home.png" height="25px" width="25px" alt="home">
<label style=" margin-top:-3px; vertical-align:middle; line-height:3px; font-size:10px !important; color:grey; font-weight:bold !important;">HOME</label>
</a></li>
<li><a href="yorkInfoPage.html" class="ui-btn-activeown" data-transition="slide" style="border-left-color: #AEACAD !important; padding-top:2px !important; background-image: linear-gradient(#DBD9DA, #FCFAFB) !important; height:35px !important; ">
<img src="images/info.png" height="23px" width="24px" alt="info">
<label style=" margin-top:-1px; vertical-align:middle; line-height:3px; font-size:10px !important; color:grey; font-weight:bold !important;">INFORMATION</label>
</a></li>
</ul>
</div>
</div>
</div>
<!-- <div class="ui-loader-background"> </div> -->
<div id="domMessage" style="display:none; " data-textonly="true" class='ui-loader ui-corner-all ui-body-b ui-loader-verbose'><h1>Chiller Models are loading</h1></div>
</body>
</html>