如果在页面顶部有固定位置的元素，例如使用键盘（PgUp / PgDown，Space）进行页面滚动有时会变得困难，例如：导航栏：滚动后，固定元素可能会隐藏视口底部不可见的内容。
如何解决这个问题？浏览器计算它们应该滚动多远？我观察了不同浏览器以及不同页面上相同浏览器的不同行为（例如，Firefox在http://www.sueddeutsche.de/上留下了大约80px的旧内容，但在http://www.taz.de上却少得多.Chromium留下了更多的内容。 ）。
这是一个问题，即我旁边的人是否使用键盘滚动网页？你知道任何统计数据吗？
为了说明问题，我创建了一个小提琴：
https://jsfiddle.net/x7hj8c4m/
尝试使用Firefox上的Space滚动内容。固定元素将覆盖滚动前尚未显示的文本。如果您添加left: 0，则可以使用。
答案 0 :(得分：4)
非常有趣的观察。
首先，按 space 相当于按 PgDn 。当按下 PgDn 时，页面应垂直滚动大约“一页的px值”。如OP的小提琴所示，Firefox特别是根据它是否检测到固定标题来计算此值。
根据我自己对IE，Chrome，Firefox的测试，我推断出：
如果没有position: fixed元素，Chrome和IE会向下滚动文档高度的 ~87.5％; Firefox向下滚动文档高度 - 滚动条高度 - ~20px 。
屏幕左上角有一个position: fixed; width: 100%元素，Firefox智能地理解该元素在感知上降低了文档高度，因此适用：文档高度 - 滚动条高度 - 固定元素身高 - ~20px 。条件似乎非常具体：元素必须完全固定在文档框模型的左上角，并且全宽，以使其工作。其他浏览器（Chrome，IE）不执行此类补偿，并执行标准87.5%滚动。
我不知道这是否相关，但可能与position: sticky的支持有关。
答案 1 :(得分：3)
通过键盘滚动是一个非常基本的行为，可能与DOM之间的交互过多（如果有的话），所以期望它对固定元素的考虑可能太多了。似乎有特定于浏览器的预定义增量（我不知道它们是否或如何自定义），但请注意，当您使用向上/向下箭头键时，增量通常较小（可能足够小）。