0

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>

2
  • No entendí lo que intentas realizar, si pusieras una captura del diseño se entendería un poco, por certo, la propiedad "float" de css ya casi está en desuso, te recomiendo posicionar los elementos con la propiedad css flexbox "flex"
    – Elboy
    Commented el 9 mar. 2021 a las 20:43
  • ibb.co/PNfzNYW aqui esta la imagen, lo que quiero es que el sidebar se encuentre en la pocision de donde dice articulo 1 y se vaya desplazando el sidebar conforme el scroll hasta llegar al final del elemento del articulo 2 y aun no me sale
    – Rob
    Commented el 9 mar. 2021 a las 20:51

1 respuesta 1

0

Supongo que quieres algo como esto... Usa flex, deja de lado float, y usa la propiedad sticky de css para el efecto del scroll.

*{
    padding: 0px;
    margin: 0px;
}
body {padding-top: 75px;}
header{
    width: 100%;
    height: 75px;
    position: fixed;
    z-index: 2;
    background-color: red;
    top: 0;
}
.banner{
    height: 100vh;
    background-color: green;
}

.contenido {
   display: flex;
   position: relative;
}
.articles {
  width: 80%;
  padding: 0 10px;
}
.post1, .post2{
    width: 100%;
    height: 400px;
    background-color: red;
    margin-top: 10px;
    margin-bottom: 10px;
}

aside{
    width: 20%;
    height: 300px;
    background-color: silver;
    position: -webkit-sticky;
    position: sticky;
    margin: 10px 0;
    top: 85px;
}

.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">
  <div class="articles">
      <article class="post1"><h3>ARTICULO 1</h3></article>
      <article class="post2"><h3>ARTICULO 2</h3></article>
  </div>
  <aside><h3>SIDEBAR</h3></aside>

</div>

<div class="pagina"><h3>PIE DE PAGINA 1</h3></div>

<footer><h3>FOOTER</h3></footer>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.