Question

作为残疾用户（以及传统Windows用户），我只在绝对必要时才使用鼠标。

网页开发人员忘记了我们对键盘的依赖，这几乎是幽默的。

输入流行的（你的Bootstrap！）固定位置标题/导航栏。

访问具有此功能的网站，按spacebar向下滚动，您可能无法阅读前几行。

Bootstrap的解决方案是一个开始。他们建议使用top-margin来容纳固定栏。这不适用于滚动。内容仍然模糊不清。

任何人都有一些解决方案或最佳做法？

Answer 1

这是一个简单的解决方案：将所有非标头内容放入包含元素中。提供标题position: fixed;和top: 0;。然后给容器position: relative;和margin-top大致等于标题的高度。例如：

风格：

h1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 5rem;
  z-index: 1;
  padding: 1rem;
  background-color: #bada55;
  margin: 0;
}

.container {
  margin-top: 10em;
  position: relative;
}

HTML：

<h1>Lorem ipsum dolor sit amet.</h1>
<div class="container">
  <ol>
    <li>Consectetur adipiscing elit.</li>
    <li>Morbi ornare sagittis enim a pulvinar.</li>
    <li>Aenean a elit tempor, tempor dui eu, blandit est.</li>
    <li>Sed id dui condimentum, posuere neque quis, laoreet diam.</li>
   ...
  </ol>
</div>

工作演示：http://codepen.io/KatieK2/pen/wAzbi

固定位置标题是否有确定的选项？

1 个答案: