css - 标题顶部的移动导航，但仍定位为静态

Question

前往大多数设备后，我都有导航。它看起来像这样：

<header role="banner">
    <hgroup>
        <h1>
            <a href="/" rel="home">Site name</a>
        </h1>
        <h2>subname</h2>
    </hgroup>
    <nav>
        <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
            <li><a href="#">Option 4</a></li>
        </ul>
         <a href="#" id="pull">Menu</a>
    </nav>
</header>

在纵向潜水中，我想将 NAV 放在顶部并在单击 MENU 后将其向下滑动。问题是：如何以这样的方式将其置于顶部，在向下滑动后将内容（标题）向下移动。好像“导航”在进入 DOM 之前，但仅适用于面向纵向的智能手机。绝对位置放置在导航上方。我需要在同一个流程中。