滚动时让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的工作示例。

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将蓝色条设置为以下内容：

Position: fixed;
top: 0px;
z-index: 1;

然后设置您想要条形的元素 转到：

z-index: 2;

这基本上意味着蓝条是“固定的”。始终在浏览器的顶部。它下方的导航元素可能需要一个高的边距 - 高蓝色条是在滚动之前将其推到蓝色条下方。