我怎么能解释固定位置.覆盖在页面上

How can I account for fixed pos. overlay on page down?

本文关键字：覆盖 位置 定位 能解释      更新时间：2023-09-26

假设我有一个导航条div，它位于页面顶部的fixed位置，并且网页的其余部分在其下方滚动。

我如何告诉页面，当用户按下page Down或空格键向下滚动一个页面高度时，页面滚动的距离考虑到可见的内容区域，以便下一个"页面"的第一句话不会隐藏在导航条下。也就是说，我想让它滚动(伪代码)browser_height - height_of_navbar

如果可能的话，最好使用更简单的CSS解决方案，但如果需要的话，我也愿意使用JavaScript解决方案。

为正文添加margin-top。

CSS: 

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

添加以下样式:

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

这将阻止整个页面滚动。

将这些样式添加到你的内容中(将100更改为导航条的高度):

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

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

例子小提琴

相关文章：