0

链接到页面。

代码

<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. 在答案中它指出：

在页面顶部的标题中添加一些填充，以便导航元素不会与页面内容重叠。

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

4

1 回答 1

2

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

于 2021-08-05T04:43:39.860 回答