Me gustaría usar el efecto de desplazamiento de la página para que solo el contenido del elemento #right se desplace en el diseño. Se puede ver un efecto similar en Facebook cuando se desplazan las publicaciones (las publicaciones se desplazan mientras el panel izquierdo y la barra superior permanecen en su lugar). ¿Alguno de ustedes tiene una idea de cómo puedo obtener el mismo efecto para mi contenedor #right en el código?
#header,#footer{
width:100%;
height:80px;
background:blue;
}
#content{
width:1000px;
margin:0 auto;
overflow:hidden;
}
#left{
width:200px;
float:left;
background:green;
margin:20px 0;
height:100vh;
}
#right{
float:right;
width:calc(100% - 220px);
}
.item{
height:80px;
margin:20px 0;
background:red;
}
<div id="header">
header
</div>
<div id="content">
<div id="left">
left
</div>
<div id="right">
<!-- this content is scrolling-->
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
</div>
<div id="footer">
footer
</div>
3 respuestas
Usando JQuery puede agregar una clase con estilo de position:fixed
y top:0
y activarse usando la función de desplazamiento para una mejor vista / efecto del elemento en el lateral.
$(window).scroll(function(){
var header_height = $('#header').height();
if ($(this).scrollTop() > header_height) {
$('#left').addClass('fixed');
} else {
$('#left').removeClass('fixed');
}
});
#header,#footer{
width:100%;
height:80px;
background:blue;
}
#content{
width:1000px;
margin:0 auto;
overflow:hidden;
}
#left{
width:200px;
float:left;
background:green;
margin:20px 0;
height:100vh;
}
#right{
float:right;
width:calc(100% - 220px);
}
.item{
height:80px;
margin:20px 0;
background:red;
}
.fixed{
position:fixed;
top:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
header
</div>
<div id="content">
<div id="left">
left
</div>
<div id="right">
<!-- this content is scrolling-->
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
</div>
<div id="footer">
footer
</div>
Use la propiedad position: fixed
en CSS
#header,#footer{
width:100%;
height:80px;
background:blue;
}
#content{
width:1000px;
margin:0 auto;
overflow:hidden;
}
#left{
width:200px;
float:left;
background:green;
/* Enter The Position Fixed Property Here! */
position:fixed;
margin:20px 0;
height:100vh;
}
#right{
float:right;
width:calc(100% - 220px);
}
.item{
height:80px;
margin:20px 0;
background:red;
}
<div id="header">
header
</div>
<div id="content">
<div id="left">
left
</div>
<div id="right">
<!-- this content is scrolling-->
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
</div>
<div id="footer">
footer
</div>
Posición de uso: fija y disminuye su altura de clase "izquierda".
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.