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

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 CSS3CSS?

Para para que realice esa función, lo?

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>

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 CSS3?

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>

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>

se añadieron 101 caracteres en el cuerpo
Origen Enlace
Rodrigo
  • 6.2k
  • 6
  • 16
  • 37

Intento realizar que el sidebarsidebar aparezca a la altura de mi articulo 1artículo 1 y se desplace con el scrollscroll hasta el articulo 2, comoartículo 2

¿Cómo puedo hacerlehacerlo con CSS3 paraCSS3?

Para que realice esa funcionfunción, lo intenteintenté con el siguiente codigocódigo, pero sigue apareciendo igual y no de desplaza con el scrollscroll el sidebarsidebar

<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>

y este es mi CSS de mi estructura HTML en la cual intento hacer lo que comentaba arriba pero no da el resultado que requiero

*{
    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>
*{
    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;
}
 

Intento realizar que el sidebar aparezca a la altura de mi articulo 1 y se desplace con el scroll hasta el articulo 2, como puedo hacerle con CSS3 para que realice esa funcion, lo intente con el siguiente codigo pero sigue apareciendo igual y no de desplaza con el scroll el sidebar

<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>

y este es mi CSS de mi estructura HTML en la cual intento hacer lo que comentaba arriba pero no da el resultado que requiero

*{
    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;
}

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 CSS3?

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>
 

Origen Enlace
Rob
  • 7
  • 1

Diseño con HTML5 y CSS3

Intento realizar que el sidebar aparezca a la altura de mi articulo 1 y se desplace con el scroll hasta el articulo 2, como puedo hacerle con CSS3 para que realice esa funcion, lo intente con el siguiente codigo pero sigue apareciendo igual y no de desplaza con el scroll el sidebar

<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>

y este es mi CSS de mi estructura HTML en la cual intento hacer lo que comentaba arriba pero no da el resultado que requiero

*{
    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;
}