html - propiedades - Desplazar una etiqueta div en particular

manual html div

Question

Tengo este codigo

#points{
  width:25%;
  background:#2a2a2a; 
  height:20px; 
  color:white; 
  z-index:2;
  position:absolute;
}
#areas{
  position:absolute;
  color:white; 
  border-right:2px solid black; 
  height:120%;
}

<div class="container" style="width:100%">
  <div class="scale" style="width:100%; position:relative;">
    <div id="points" style="left:0; ">0</div>
    <div id="points" style="left:25%;">25</div>
    <div id="points" style="left:50%;">50</div>
    <div id="points" style=" left:75%;">75</div>
    <div id="points" style=" left:100%;">100</div>
    <div id="points" style=" left:125%;">125</div>
    <div id="points" style=" left:150%;">150</div>
  </div>

  <div class="area" style="width:100%; background:orange;">
    <div id="areas" style="left:0;"></div>
    <div id="areas" style="left:25%;"></div>
    <div id="areas" style="left:50%;"></div>
    <div id="areas" style="left:75%;"></div>
    <div id="areas" style="left:100%;"></div>
    <div id="areas" style="left:125%;"></div>
    <div id="areas" style="left:150%;"></div>
    <div id="areas" style="left:175%;"></div>
  </div>
</div>

Mientras se desplaza hacia arriba y hacia abajo, solo me gustaría desplazar el area div; No quiero que la scale div se oculte del contenedor mientras se desplaza.

Intenté usar la position: fixed para el div de scale , pero no encajaba correctamente con el desplazamiento a la izquierda, este caso solo muestra el 0 25 50 75 , pero cada punto de escala se corresponde con la etiqueta del div de área, por lo que se muestra el div. etiqueta 0,25,50,.. 150 con estas areas correspondientes etiquetas div

¿Hay alguna otra manera de hacerlo sin posición positon: fixed ?

Violín de trabajo con posición: absoluta . Pero los points divs están ocultos del contenedor.

Posición: fija . Las etiquetas div del lado izquierdo no son visibles.

Answer 1

¿Quieres algo así?

https://jsfiddle.net/qk37kson/ (Editado: agregó un poco de JQuery para hacer que el encabezado se mueva horizontalmente)

1) El atributo id tiene que ser único. Es por eso que en JavaScript tenemos getElementById y getElementsByClassName .

Desde W3Schools:

http://www.w3schools.com/tags/att_global_id.asp

El atributo id especifica una identificación única para un elemento HTML.

http://www.w3schools.com/tags/att_global_class.asp

El atributo de clase especifica uno o más nombres de clase para un elemento.

2) cambio

 <div class="scale" style="width:100%; position:relative;">

a

 <div id="scale" style="width:100%; position:fixed;">

3) luego, en tu CSS, agrega esto:

#scale {
    top:0px;
    left:0px;
    z-index:2;
}

Editar:

4) Finalmente, agregue un poco de JQuery:

$(window).scroll(function(){
    $(''#scale'').css(''left'',''-''+$(window).scrollLeft()+''px'');
});

Answer 2

Puede mantener .container el overflow-y .area y el overflow-y .area para desplazarse. De este modo, el contenedor desplazaría .scale y .area largo de x pero no y, pero la .area se desplazará a lo largo de y dentro de sí mismo para darle su efecto.