面板和固定位置页眉/页脚

Question

我正在尝试为我的面板使用揭示动画。但是，当jQuery Mobile运行动画时，标题不会滑到面板的位置，因此标题与面板略有重叠。请参见此处的图片：http://i.imgur.com/fjuDSRe.png

这是我的代码：

<div data-role="page" id="taskdetailspage">

       <div data-role="header" data-id="navbar" data-position="fixed" data-tap-toggle="false">
            <a href="#tasklistpage" data-rel="back" class="ui-btn-left">Back</a>
            <p class="title">Field Service Engineer</p>
            <a href="#taskdetailspanel" class="ui-btn-right">Actions</a>
        </div>

        <div id="taskholder" data-role="content">


        </div>

        <div data-role="content" id="directionsholder"></div> 

        <div data-role="panel" data-theme="a" id="taskdetailspanel" data-position="right" data-display="reveal" 
           data-position-fixed="true">
           <h3>Actions</h3>
           <ul data-role="listview" data-theme="a">
              <li><a href="#updateStatusPopup" id="updateStatusButton" data-rel="popup">Update Task Status</a></li>
              <li><a id="directionsButton" href="#">Get Directions</a></li>
              <li><a href="#dialogcontent" data-rel="popup">Decline Task</a></li>
           </ul>
        </div>

        <div id="updateStatusPopup" data-role="popup" data-theme="a" data-overlay-theme="a" 
            data-transition="fade" data-position-to="window">
           <div data-role="header">
              <h3>Update Task Status</h3>
           </div>

           <div data-role="content">
               <form action="javascript: updateTaskStatus(currentTaskId);">
                  <fieldset data-role="controlgroup">
                     <legend>Current Status:</legend>
                     <input data-theme='a' name="updateStatus" id="arrived" value="Arrived" checked="checked" type="radio">
                     <label for="arrived">Arrived</label>
                     <input data-theme='a' name="updateStatus" id="wip" value="Work in Progress" type="radio">
                     <label for="wip">Work in Progress</label>
                     <input data-theme='a' name="updateStatus" id="completed" value="Complete" type="radio">
                     <label for="completed">Complete</label>
                  </fieldset>
                  <label for="statusNotes">Status Notes:</label>
                  <input name="statusNotes" id="statusNotes" value="" type="text">
                  <fieldset class="ui-grid-a">
                     <div class="ui-block-a"><input type="submit" value="Update" data-theme='a' id='confirmUpdateButton'></div>
                     <div class="ui-block-b"><a data-theme='a' data-role='button' data-rel='back'>Cancel</a></div>     
                  </fieldset>
               </form>
           </div>
        </div>

        <div id="dialogcontent" data-role="popup" data-theme="a" data-overlay-theme="a" 
            data-transition="fade" data-position-to="window">
           <div data-role="header">
              <h3>Confirm Decline Task</h3>
           </div>

           <p>Are you sure you want to decline this task and remove it from your calendar?</p>         

           <fieldset class="ui-grid-a">
              <div class="ui-block-a"><a data-theme='a' href='#' id='confirmDeclineButton' data-role='button'>Decline</a> </div>
              <div class="ui-block-b"><a data-theme='a' href='#' data-role='button' data-rel='back'>Cancel</a></div>       
           </fieldset>
        </div>

我在SO上发现了另外一个类似描述的问题，但解决方案难以理解。

提前致谢！