让一个div去另一个下方滚动

问题描述：

我想要做的是，当我滚动页面，只有下半部应该移动。我做到了，但因为填充它使这样的：

这是我的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它工作正常：

我应该如何改变它，使白色边框在没有滚动的情况下在那里，但是当我滚动时，让文本在最后一张图片的蓝色部分下面出现？

我想'.sites-list'是内容，不是吗？你是如何添加蓝色框？这些div元素？那里有什么CSS？ – lumio

是的，这是内容。你的意思是信封图标？它是在不同的文件在javascript –

没有顶部和底部的蓝色边框 – lumio

答

我不知道你的酒吧究竟是如何在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>

它看起来很不错，但是在文本之前没有填充。我在开始时应该有一个填充，就像你在第一张图片 –

中看到的那样，我更新了我的答案。增加内容的填充。如果你想将相对与绝对尺寸相混合，使用'calc'。 – lumio

它适合你吗？ – lumio

答

您可以设置蓝色横条以下几点：

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

然后设置你想要的吧走过去的元素：

z-index: 2;

这基本上意味着，蓝色酒吧在任何时候都是“固定”在浏览器的顶部。在它下面的导航元素可能需要无论高的边缘顶部，蓝色条在滚动之前将其推到蓝色条之下。

我试过了但我的oppinion没有差别 –

让一个div去另一个下方滚动

相关推荐