Question

我想创建一个固定的标题栏，但问题是标题不像往常一样是全宽导航栏。

它是中间容器的标题，我有侧边栏和容器。

所以侧边栏应该是相同的，但是当我滚动容器时，容器标题应该保持在顶部。

就像在这个代码示例中一样：

https://plnkr.co/edit/RxSkde8M5wkNg5XoFNEF?p=preview

粉红色标题“HEADER HERE”应始终保持在顶部。

示例代码：

<div id="wrapper">
  <div class="side">
    side content
  </div>
  <div class="content">

    <div class="header">
      HEADER HERE
    </div>

    <div class="inner">
      dontcare long content
    </div>

  </div>
</div>

Answer 1

在标题div

中使用此样式

    <div style="position: fixed; width: 100%" class="header">
      HEADER HERE
    </div>

Answer 2

.content .header {background：pink; top：0; position：fixed; width：100％;}

将以下内容添加到.content .header会使标题始终位于顶部

Answer 3

我已经为你修好了：https://plnkr.co/edit/CO910df64twLhEvuaWvb?p=preview;

解释

您将标题设置为固定位置（固定在屏幕上）。因此，您的部分内容将位于标题下。所以在这里我在内容上放了一个填充顶部（你可以用一个边距替换它）。 padding-top的值必须与标题的高度相同。

.content {
  background: blue;
  width: 70%;
  float: left;
  position: relative;
  padding-top: 2rem;
}

.content .header {
  position: fixed;
  top: 0;
  width: 100%;
  background: pink;
  height: 2rem;
}

Answer 4

只需将position: fixed添加到.header班级

即可

.content .header {
  background: pink;
  position: fixed;
  top: 0;
}

为内部容器

4 个答案: