当我滚动页面时，如何让这个导航栏保持在顶部？

Question

Link 到 page.

代码

<div class="navigation">
    <ol class="breadcrumb">
        <li><a href="msa-overview.html">Overview</a></li>
    </ol>
    <div class="nav-arrows">
        <div class="btn-group btn-group" role="group"><div class="btn-group"><button type="button" title="In this page..." class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span></button><ul id="inline-toc" class="dropdown-menu dropdown-menu-right"><li><a href="#Quick_Start_Getting_Started">Quick Start - Getting Started</a></li><li><a href="#Step_1">Step 1</a></li><li><a href="#Step_2">Step 2</a></li><li><a href="#Step_3">Step 3</a></li><li><a href="#Step_4">Step 4</a></li></ul></div><a class="btn btn-default" href="msa-overview.html" title="Overview" role="button"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span></a><a class="btn btn-default" href="msa-overview.html" title="Overview" role="button"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a><a class="btn btn-default" href="msa.html" title="Using Meeting Schedule Assistant" role="button"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a></div>
    </div>
</div>

截屏

背景

这个网站是用HelpNDoc建立的。我想更新我的 HTML 建筑模板，以便在您滚动页面时此导航栏浮动在顶部。目前导航栏消失了。

如果我了解 HTML 内容中需要进行哪些结构更改，那么我将能够修改我的 HelpNDoc HTML 构建模板。

更新

根据提供的答案，我通过更改导航栏元素在浏览器本身内进行了一些测试：

position: fixed;
background-color: #fff;

看起来像这样：

它确实粘在顶部，这很好，但我现在有两个问题：

我们如何让导航箭头等停留在右边？像以前一样？
在答案中指出：

add some padding to the header at the top of the page so that the navigation element does not overlap the page content.

我们到底在哪里添加这个填充？我们应该使用什么值？由于可以在各种屏幕尺寸等上查看此帮助文档

Answer 1

您可以将 position: fixed 应用于导航 div，添加 background-color: #fff，然后向页面顶部的 header 添加一些填充，以便导航元素不与页面内容重叠。

当我滚动页面时，如何让这个导航栏保持在顶部？

How can I keep this navigation bar at the top when I scroll the page?

html

javascript

helpndoc

代码

截屏

背景

更新