css - w3schools - sticky element

¿Por qué `overflow: hidden` impide que` position: sticky` funcione?

Question

En el siguiente fragmento, hay un div adhesivo colocado dentro de un contenedor. Se adhiere a la parte superior del panel de desplazamiento mientras permanece dentro de su contenedor todo el tiempo. Este es el mismo comportamiento que el de los encabezados UITableView en iOS, donde los encabezados permanecen visibles hasta que el próximo encabezado esté en la parte superior.

En el segundo fragmento, todo es igual excepto que el contenedor tiene un overflow:hidden regla CSS overflow:hidden . Esto parece evitar la position:sticky comportamiento position:sticky funciona correctamente.

.parent {
  position: relative;
  background: #ccc;
  width: 500px;
  height: 150px;
  overflow: auto;
  margin-bottom: 20px;
}

.hidden-overflow {
  overflow: hidden;
}

.sticky {
  position: sticky;
  background: #333;
  text-align: center;
  color: #fff;
  top: 10px;
}

<div class="parent">
  <div>
    <div class="sticky">
      Hi, I am a sticky inside the container which contains the first paragraph.
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
    </p>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat
    nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
  </p>
  <p>
    Integer congue augue a quam tincidunt, vitae dictum sem iaculis. Proin feugiat nibh vitae leo facilisis, eget laoreet augue dictum. Nunc facilisis tempor feugiat. Aenean eget interdum diam. Maecenas non risus iaculis, scelerisque ipsum eu, facilisis urna.
    Integer velit justo, vestibulum vel vulputate vel, bibendum eu lorem. Phasellus viverra nisl a mi pretium eleifend.
  </p>
</div>
<div class="parent">
  <div class="hidden-overflow">
    <div class="sticky">
      Hi, I am another sticky in the container which contains the first paragraph, but my container has overflow:hidden.
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
    </p>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat
    nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
  </p>
  <p>
    Integer congue augue a quam tincidunt, vitae dictum sem iaculis. Proin feugiat nibh vitae leo facilisis, eget laoreet augue dictum. Nunc facilisis tempor feugiat. Aenean eget interdum diam. Maecenas non risus iaculis, scelerisque ipsum eu, facilisis urna.
    Integer velit justo, vestibulum vel vulputate vel, bibendum eu lorem. Phasellus viverra nisl a mi pretium eleifend.
  </p>
</div>

_{(Fragmento adaptado de @ Daniel''s here )}

¿Por qué la position:sticky trabajo position:sticky en un contenedor con overflow:hidden ?

Answer 1

Con la introducción de display: contents , puede usar pegajoso dentro de un contenedor con desbordamiento automático / oculto y omitir esta limitación aburrida.

Solo necesita envolver su componente en un div con display: contents

Demostración: https://jsbin.com/zodacapamu/edit?html,css,output

Más información sobre https://css-tricks.com/get-ready-for-display-contents/

Por supuesto, no funcionará en IE11 antes de que alguien funcione, pero los nuevos navegadores funcionan bien.

En la imagen de abajo, hemos implementado una tabla con alrededor de 50 columnas con una posición fija en el encabezado y las primeras 3 columnas y simplemente funciona.

Manifestación

Answer 2

De acuerdo con Mozilla ( enlace aquí )

Sticky es una API experimental y no debe usarse en el código de producción.

Entonces, para mí, esta es la razón por la que no funciona. Tanto Edge como IE 11 tampoco lo admiten, así que para mí, hacer algo como esto con JavaScript sería el camino a seguir, hay muchas cosas que deberían ayudar.

Un ejemplo es esto here

Espero que esto ayude.

Answer 3

No estoy seguro de que esto funcione en todos los casos, pero me he encontrado con esto y he podido solucionar el problema reemplazando overflow: hidden; con clip-paths .

.parent {
    /*overflow: hidden; removed */
    position: absolute; /*this is required for clip-paths to work*/
    -webkit-clip-path: inset(0); /* safari*/
    clip-path: inset(0);
    clip: rect(0px, auto, auto, 0px); /* IE11/Edge (not that IE11 supports sticky anyway!) */
}

En cuanto a tener que agregar la posición absoluta, envolver el desbordamiento: elemento oculto en otra posición: elemento relativo y luego agregar arriba, abajo, izquierda y derecha: 0; debería hacerlo llenar su contenedor padre.

Answer 4

overflow: hidden no impide la position: sticky de trabajar. Pero si configura el overflow como hidden en cualquier ancestro de su elemento adhesivo, entonces este elemento ancestro será el contenedor de desplazamiento para su elemento adhesivo. Si cambia el valor de overflow de su antepasado de hidden a scroll y desplaza a este ancestro (no a la ventana), puede ver que la función adhesiva sigue funcionando.

Ver también https://github.com/wilddeer/stickyfill#pro-tips :

Cualquier valor no predeterminado (no visible) para overflow, overflow-x o overflow-y en cualquiera de los elementos predecesores ancla lo pegajoso al contexto de desbordamiento de ese predecesor. Simplemente hablando, desplazar al predecesor hará que se pegue el adhesivo, y desplazar la ventana no. Esto se espera con overflow: auto y overflow: scroll, pero a menudo causa problemas y confusión con overflow: hidden.

O http://www.coreyford.name/files/position-sticky-presentation/ :

La posición de la caja depende de su bloque contenedor (establecido como para position: static) así como de su contenedor de desplazamiento , definido por el ancestro más cercano en el mismo documento con un valor calculado para ''overflow-x'' o ''overflow-y'' que no sea ''visible'', o la ventana gráfica si no existe tal antepasado.

O el borrador de trabajo del W3C de nivel 3 del módulo de diseño posicionado CSS :

Un cuadro de posición fija se coloca de manera similar a un cuadro relativamente posicionado, pero el desplazamiento se calcula con referencia al antepasado más cercano con un cuadro de desplazamiento, o la ventana gráfica si ningún antepasado tiene un cuadro de desplazamiento.