Кнопка плавающая при переключении заголовка JQuery Mobile

Question

Я пытаюсь добавить кнопку дома справа от моего заголовка. Я также скрываю панель инструментов за заголовком. Теперь, когда вы добавляете домашнюю кнопку в заголовок, она не будет фиксироваться на заголовке при переключении.

<div data-role="header"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="a.html">Settings</a> 

       </li> 
       <li><a href="b.html">Whatever</a> 

       </li> 
      </ul> 
     </div> 
     <!-- /navbar --> 
     <h1>Hide the Toolbar</h1> 
     <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false" 
     data-direction="reverse" onclick="empty()" data-transition="slide" 
     data-iconpos="notext" class="ui-btn-right">home</a> 
    </div> 
    <!-- /header --> 

$(document).bind('pageinit', function (event) { 


    loadHomePage(); 


    $("#HomeHeader").on("click", function() { 
     $("#navMainToolbar").slideToggle(200); 
    }); 

    $("#navMainToolbar").on("click", function (e) { 
     e.stopPropagation(); 
    }); 

}); 

Вот demo вопроса.

Answer 1

Вы должны переместить Navbar вне заголовка:

<div data-role="page"> 
    <div data-role="navbar"> 
     <ul> 
      <li><a href="a.html">Settings</a> 

      </li> 
      <li><a href="b.html">Whatever</a> 

      </li> 
     </ul> 
    </div> 
    <!-- /navbar --> 
    <div data-role="header"> 
     <h1>Hide the Toolbar</h1> 
<a href="#Home" data-role="button" data-icon="home" data-iconshadow="false" 
     data-direction="reverse" onclick="empty()" data-transition="slide" data-iconpos="notext" 
     class="ui-btn-right">home</a> 

    </div> 
    <!-- /header --> 
    <div data-role="content"> 
     <p>Page content goes here.</p> 
    </div> 
    <!-- /content --> 
    <div data-role="footer"> 
      <h4>Page Footer</h4> 

    </div> 
    <!-- /footer --> 
</div> 
<!-- /page --> 

Пример:

• http://jsfiddle.net/DMUwp/11/