Intento realizar que el sidebar aparezca a la altura de artículo 1 y se desplace con el scroll hasta el artículo 2
¿Cómo puedo hacerlo con CSS para que realice esa función?
Lo intenté con el siguiente código, pero sigue apareciendo igual y no de desplaza con el scroll el sidebar
*{
padding: 0px;
margin: 0px;
}
header{
width: 100%;
height: 75px;
position: fixed;
z-index: 2;
background-color: red;
}
.banner{
height: 100vh;
background-color: green;
}
.post1, post2{
width: 80%;
height: 400px;
background-color: red;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
float: left;
}
aside{
width: 19%;
height: 300px;
background-color: silver;
float: right;
}
.pagina{
width: 100%;
height: 400px;
background-color: green;
clear: both;
}
footer{
width: 100%;
height: 300px;
background-color:blue;
}
<header><h3>HEADER</h3></header>
<div class="banner"><h3>BANNER</h3></div>
<div class="contenido">
<article class="post1"><h3>ARTICULO 1</h3></article>
<article class="post2"><h3>ARTICULO 2</h3></article>
<aside><h3>SIDEBAR</h3></aside>
</div>
<div class="pagina"><h3>PIE DE PAGINA 1</h3></div>
<footer><h3>FOOTER</h3></footer>