¿Por qué mi position:sticky no funciona?

Después de de nuestra extensa selección de información dimos con la respuesta este conflicto que presentan muchos los usuarios. Te regalamos la respuesta y nuestro objetivo es resultarte de gran apoyo.

Solución:

Cuando colocas un position:sticky elemento dentro de otro elemento, las cosas pueden complicarse, es posible que deba establecer la propiedad de visualización de sus elementos principales en algo además de bloquear.

intente agregar lo siguiente:

.center, header
  display:initial;

Probablemente también pueda configurarlo en línea o en bloque en línea según sus necesidades.

Aquí está su fragmento con eso agregado junto con un par de otras cosas solo para fines de visualización:

body
  height:200vh;


.center, header
  display:initial;


.dropmenu 
  display: block;
  height: 65px;
  width: 100%;
  background: url("images/menuicon.png") no-repeat 98% center;
  background-color: #404040;
  cursor: pointer;


nav ul 
  padding: 0;
  overflow: hidden;
  background: #505050;
  display: none;


nav ul li 
  display: block;
  float: none;
  text-align: left;
  width: 100%;
  margin: 0;


nav ul li a 
  color: white;
  padding: 10px;
  border-bottom: 1px solid #404040;
  display: block;
  margin: 0;


div.sticky 
  position: sticky;
  top: 0;

    
    

        

            
            

            

                






                
            
            
        

   
content goes here

Por lo general, se debe a la propiedad de “desbordamiento” de algunos padres.

Si algún padre/ancestro del elemento adhesivo tiene alguna de las siguientes propiedades de desbordamiento establecidas, posición: pegajosa no funcionará:

• desbordamiento: oculto
• desbordamiento: desplazamiento
• desbordamiento: automático

Esto es lo que me ayudó. Simplemente copie y pegue el siguiente fragmento en la consola de su navegador. Esto lo ayudará a identificar todos los elementos principales con la propiedad de desbordamiento establecida en algo que no sea visible:

    // Change to your STICKY element
    let parent = document.querySelector('.sticky').parentElement;
    
    while (parent) 
        const hasOverflow = getComputedStyle(parent).overflow;
        if(hasOverflow !== 'visible') 
            console.log(hasOverflow, parent);
        
        parent = parent.parentElement;
    

Entonces, se trata principalmente de establecer la propiedad de desbordamiento correcta en el elemento correcto.

Para mí, encontré que overflow: hidden; en un contenedor principal era lo que estaba rompiendo el niño position: sticky;. Si se ve un desbordamiento en el padre, la memoria adhesiva comienza a funcionar.

Te mostramos comentarios y puntuaciones

---

---

Utiliza Nuestro Buscador