css - 滚动时使一个 div 位于另一个 div 下方

Question

我有一个看起来像这样的页面:

我想做的是当我滚动页面时，只有下半部分应该移动。我做到了，但由于填充，它变成了这样:

这是我的 CSS 文件:

.sites-list {
    height: 40%;
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 400px;
    padding-left: 18rem;
    padding-top: 5%;
    background-color: #ffffff;
    text-align: left;
    font-size: 30px;
    line-height: 40px;
    color: #396aba;
}

当我在浏览器中检查它并取消选中 top 和 padding-top 时，它工作正常:

如果没有滚动，我应该如何更改它以使白色边框在那里，但是当我滚动以使文本位于蓝色部分下方时，如上一张图片所示？

Answer 1

我不太清楚你的条形图在 CSS 中的样子，但这是一个使用 position: fixed 的工作示例。

.Bar {
  position: fixed;
  left: 0;
  width: 100%;
  height: 20vh;
  z-index: 10;
  
  background: #175f8f;
}

.Bar-top {
  top: 0;
}

.Bar-bottom {
  bottom: 0;
}

.Content {
  position: relative;
  z-index: 0;
  padding-top: calc( 20vh + 100px ); /* set to the same height as the bar would be */
  /* If you want to increase the padding and mix relative with absolute dimensions, use calc. Otherwise just add them up for a slightly better performance */
  height: 2000px; /* we cheat a bit so we have something to scroll */
}

<div class="Bar Bar-top"></div>
<div class="Content">
  Having your content here.
</div>
<div class="Bar Bar-bottom"></div>