Skip to main content
3 de 3
se eliminó 1 carácter en el cuerpo
Rodrigo
  • 6.2k
  • 6
  • 16
  • 37

Diseño con HTML5 y CSS3

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>

Rob
  • 7
  • 1