防止内容在固定导航栏下方滚动

Question

这个页面http://alsotoday.com/roemerstrasse/有一个固定的引导导航栏，它应该保持固定，所以背景中的视频可以通过它发光。当一直向上滚动内容时，它将位于导航栏下方，这是不利的。任何人都知道，如何为内容创建一个上边距，以便它仅在导航栏下方滚动而不将导航栏更改为非固定？

编辑 1：main-area-video 和 panel_container（同时称为 main-area）都是高度 100%，因为每个视频和图块都应该填满屏幕。

Answer 1

像这样的东西？在这个片段中，文章不会在导航栏后面，只有内容是可滚动的。例如，这就是 SPA 应该如何工作。

编辑我为导航栏添加了一个不透明度，所以你可以看到，它后面没有任何东西。

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.navbar {
  position: fixed;
  top: 0;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  font-family: Helvetica;
  font-size: 30px;
  background: darkcyan;
  width: 100%;
  padding: 0 20px;
  color: white;
  opacity: 0.2;
}

.content {
  margin-top: 50px;
  background: #ddd;
  height: calc(100vh - 50px);
  overflow: auto;
  padding: 12px;
  box-sizing: border-box;
}

.article {
  height: 200px;
  width: 100%;
  background: #ccc;
  margin: 12px 0;
}

<div class="navbar">Navbar</div>
<div class="content">
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
  <div class="article"></div>
</div>

Answer 2

由于您的页面始终处于 100% 高度，并且唯一滚动的内容是您可以将其absolute而不是fixed.

但既然您要求一个具有fixed位置的解决方案，只需将 an 添加margin到内容包装器中即可。

需要明确的是：添加margin-top: {MENU_HEIGHT}px到内容 div，替换{MENU_HEIGHT}为菜单的实际高度或距菜单的所需距离。