Jquery mobile 切换标头Jquery Mobile时按钮浮动

我试图在标题右侧添加一个主页按钮。我还在标题后面隐藏了一个工具栏。现在，当添加一个主页按钮到标题，它不会停留在固定的标题时，切换

    <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();
    });

});

隐藏工具栏
$（文档）.bind（'pageinit'，函数（事件）{
加载主页（）；
$（“#HomeHeader”）。在（“单击”上，函数（）{
$（“#navMainToolbar”）。滑动切换（200）；
});
$（“#navMainToolbar”）。在（“单击”上，函数（e）{
e、 停止传播（）；
});
});

---

以下是该问题的一部分。

您需要将导航栏移到标题外：

<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 -->

隐藏工具栏
页面内容在这里

页脚

例如：

---

您可以将导航栏移到收割台外部：