Question

此页面http://alsotoday.com/roemerstrasse/有一个固定的引导程序导航栏，应该保持固定状态，以便后台的视频可以通过它发光。当内容一直向上滚动时，它将进入导航栏下方，这是不利的。有人知道，如何为内容创建一个上边距，所以它只会在导航栏下方滚动，而不会将导航栏更改为未固定？

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

Answer 1

这样的东西？在此片段中，文章不会位于导航栏后面，只有内容可滚动。例如，这就是SPA的工作方式。

编辑我在导航栏中添加了不透明度，因此您可以看到，其背后没有任何内容。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

由于您的网页始终处于100％的高度，因此滚动的唯一内容就是内容，您可以将其设为fixed而不是fixed。

但是，由于您要求使用margin位置的解决方案，只需在内容包装器中添加margin-top: {MENU_HEIGHT}px。

所以要明确：将{MENU_HEIGHT}添加到内容div，将var form = '@ViewBag.Form'; if (form == "In") { //myCode } else { //myCode }替换为菜单的实际高度或所需距离。

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

2 个答案: