Desplazar solo el contenido seleccionado en el documento del cuerpo

Question

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>

javascript jquery html css

2

urbciech 25 oct. 2019 a las 10:26

Answer 1

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>

4

little_coder 25 oct. 2019 a las 07:58

Answer 2

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>

2

Ahmed Ali 25 oct. 2019 a las 07:32

Answer 3

Posición de uso: fija y disminuye su altura de clase "izquierda".

0

Akshita Karetiya 31 oct. 2019 a las 12:00

Desplazar solo el contenido seleccionado en el documento del cuerpo

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript