我如何解释固定位置。在页面上叠加？

Question

假设我有一个导航栏div，位于页面顶部的fixed位置，网页的其余部分向下滚动。

如何告诉页面当用户按下Page Down或空格键向下滚动一页高度时，页面滚动的距离考虑到可见内容区域，以便下一个句子的第一个句子“页面“不会隐藏在导航栏下面。也就是说，我希望它滚动（伪代码）browser_height - height_of_navbar

如果可能的话，首选一个更简单的CSS解决方案，但如果需要的话，我可以使用JavaScript解决方案。

Answer 1

在身体上添加一个margin-top。

CSS：

BODY {
    margin-top: <navbar height + offset here>
}

Answer 2

添加以下样式：

html, body {
  overflow: hidden;
  height: 100%;
}

这会阻止整个页面滚动。

将这些样式添加到您的内容中（将100更改为导航栏的高度）：

.content {
  overflow: auto;
  margin-top: 100px;
  height: calc(100% - 100px);
}

这会将滚动条放在内容而不是窗口上。

Example Fiddle