position: sticky no funciona y no entiendo por qué
Yesenia P.
Nivel 3 ·
Puse en mi header position: sticky; top: 0; y no se queda pegado al hacer scroll. En otro proyecto me andaba. ¿Qué puede ser?
Respuestas 5
Jefferson Z.
Nivel 3 ·
0 0 El culpable número uno: algún ancestro con overflow hidden, auto o scroll. Sticky se pega respecto del contenedor con scroll más cercano, y un overflow en el medio lo arruina.
Gastón L.
Nivel 3 ·
0 0 Segundo: el elemento sticky solo se mueve dentro de su padre. Si el header está dentro de un div que mide lo mismo que el header, no tiene espacio para pegarse.
Marcos D.
Nivel 3 ·
0 0 Fijate también que tenga top (o bottom). Sin eso no hace nada. Pero vos lo pusiste, así que probablemente sea lo del overflow.
Rossana G.
Nivel 3 ·
0 0 Truco para encontrarlo: en las DevTools subí por los ancestros buscando un overflow distinto de visible.
Yesenia P.
Nivel 3 ·
0 0 Era un overflow-x: hidden que había puesto en un wrapper para evitar el scroll horizontal. Lo saqué de ahí y lo resolví de otra forma. Funcionó!