Как я могу сохранить эту панель навигации вверху при прокрутке страницы?

Question

Ссылка на страницу .

Код

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

Это выглядит так:

Он держится наверху, и это хорошо, но теперь у меня есть два вопроса:

1. Как сделать так, чтобы стрелки навигации и т. Д. Оставались справа? Как они это делали раньше?

2. В ответе говорится:

добавьте отступ к заголовку вверху страницы, чтобы элемент навигации не перекрывал содержимое страницы.

Куда именно мы добавляем эту подушку? И какое значение мы должны использовать? Поскольку эту справочную документацию можно просматривать на экранах разных размеров и т. Д.

Answer 1

Вы можете подать заявку position: fixed в div навигации добавьте background-color: #fff, а затем добавьте отступ к заголовку вверху страницы, чтобы элемент навигации не перекрывал содержимое страницы.