讓一個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它工作正常：

我應該如何改變它，使白色邊框在沒有滾動的情況下在那裏，但是當我滾動時，讓文本在最後一張圖片的藍色部分下面出現？

來源

2017-08-03 Samurai Jack

我想'.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>

來源

2017-08-03 11:46:54 lumio

它看起來很不錯，但是在文本之前沒有填充。我在開始時應該有一個填充，就像你在第一張圖片 –

中看到的那樣，我更新了我的答案。增加內容的填充。如果你想將相對與絕對尺寸相混合，使用'calc'。 – lumio

它適合你嗎？ – lumio

您可以設置藍色橫條以下幾點：

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

然後設置你想要的吧走過去的元素：

z-index: 2;

這基本上意味着，藍色酒吧在任何時候都是「固定」在瀏覽器的頂部。在它下面的導航元素可能需要無論高的邊緣頂部，藍色條在滾動之前將其推到藍色條之下。

來源

2017-08-03 11:42:45

我試過了但我的oppinion沒有差別 –

讓一個div去另一個下方滾動

回答

相關問題