Posición pegada en el

Question

Como debe saber, position: sticky; ha aterrizado en Webkit (demo). Hasta ahora puedo ver que esto solo funciona dentro del elemento padre. Pero me gustaría saber si puedo usar esto en un div desplazable con una tabla.

Por lo tanto, necesita 'escuchar' en el evento de desplazamiento de div, no el table.

Sé que puedo hacer esto con javascript y posicionamiento absoluto, pero me preguntaba si el sticky-positioning sería compatible con esto.

Answer 1

Como resulta que position: sticky solo funciona en la ventana y no en un desplazamiento div.

he creado un test-case con una larga mesa con un encabezado de la tabla:

<h1>Position sticky</h1> 
<div class="testTable"> 
<table class="stickyHead"> 
    <thead> 
     <tr> 
      <th>column 1</th> 
      <th>column 2</th> 
      <th>column 3</th> 
      <th>column 4</th>    
     </tr>  
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
    </tbody> 
</table> 
</div>​ 

El css utilicé:

h1 { 
    font-size: 18px; 
    font-weight: bold; 
    margin: 10px 0; 
} 
div.testTable { 
    height: 200px; 
    overflow: auto; 
} 

table.stickyHead thead { 
    position: -webkit-sticky; 
    top: 0px; 
    background: grey; 
} 
table.stickyHead td, 
table.stickyHead th { 
    padding: 2px 3px; 
}​ 

Como se puede ver, si se quita el desbordamiento de la envoltura y haga que su ventana no sea tan alta, el cabezal de la mesa se adhiere a la parte superior de la ventana. Yo no se aplica a la envoltura div incluso si usted hace dar el divposition: relative

Answer 2

position: stickyno funciona con elementos de la tabla (siempre y cuando su atributo display comienza con table-), ya que las tablas no son parte de specification:

otros tipos de diseño, tales como mesas, "flotante" cajas, anotaciones rubí, diseños de cuadrícula, columnas y manejo básico del contenido normal "flujo", se describen en otros módulos.

Answer 3

Si necesita cabecera pegajosa de cromo solamente entonces se puede establecer position: sticky; top: some_value (top propiedad es obligatoria) para td elemento de un elemento de thead.

Ver:

<table border=1> 
    <thead> 
    <tr> 
     <td style='position: sticky; top: -1px;background: red'>Sticky Column</td> 
     <td>Simple column</td> 
    </tr> 
    </thead> 

table with a stiky header