javascript - 为内部容器创建固定 header

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

我已为您修复:https://plnkr.co/edit/CO910df64twLhEvuaWvb?p=preview ;

Explanation

您将标题设置在固定位置(固定在屏幕上)。因此，您的一部分内容将位于标题下方。所以这里我在内容上放了一个padding-top(你可以用边距代替)。 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;
}