Div的移動與滾動

Question

我正在尋找一個解決方案，讓我做一個Div的移動與滾動。我想使它像下面的圖片：

所以框1和框2是div的，其與Div1構成/ Div2的區域內滾動移動。頁腳是一個限制器。如果我們有一個非常高的頁腳 - 方框1和方框2停留在Div1/Div2區域的末尾。

我還想在移動設備上這些項目不移動但是是靜態的。

由於提前， 最好的問候， D.

Answer 1

position:sticky會做等等http://www.sitepoint.com/css-position-sticky-introduction-polyfills/

移動這個

一個鏈接？ https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

div { 
 
display:flex; 
 
} 
 
aside, main, footer, div div { 
 
    border:solid; 
 
    flex:1; 
 
    margin:5px; 
 
} 
 
main { 
 
    min-width:60%; 
 
    min-height:90vh 
 
} 
 
footer { 
 
    height:40vh; 
 
} 
 
aside div { 
 
    position:sticky; 
 
    top:0; 
 
    height:60vh 
 
} 
 
.bgr { 
 
    height:70vh; 
 
    }

<div> 
 
    <aside> 
 
    <div> sticky</div> 
 
</aside> 
 
<main> main</main> 
 
<aside> 
 
    <div class="bgr"> sticky</div> 
 
</aside> 
 
</div> 
 
<footer> 
 
    footer 
 
</footer>