style - link css to html

"Posición: pegajosa"; no funciona CSS y HTML

Question

Quiero que la barra de navegación se pegue a la parte superior una vez que me desplazo hacia ella, pero no funciona y no tengo idea de por qué. Si puede ayudar, aquí está mi código HTML y CSS:

.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato",sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover{
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}

<nav style="position: sticky; position: -webkit-sticky;">
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>

Answer 1

El posicionamiento fijo es un híbrido de posicionamiento relativo y fijo. El elemento se trata como una posición relativa hasta que cruza un umbral especificado, en cuyo punto se trata como una posición fija.
...
Debe especificar un umbral con al menos uno de top , right , bottom o left para que la posición fija se comporte como se espera. De lo contrario, será indistinguible del posicionamiento relativo. [ fuente: MDN ]

Entonces, en su ejemplo, debe definir la posición en la que debe pegarse al final utilizando la propiedad top .

html, body {
height: 200%;
}
nav {
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
}
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato", sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover {
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}

<nav>
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>

Answer 2

Compruebe si un elemento ancestro tiene un conjunto de desbordamiento (por ejemplo, overflow:hidden ); intenta alternarlo. Puede que tenga que subir el árbol DOM más alto de lo esperado =).

Esto puede afectar su position:sticky en un elemento descendiente.

Answer 3

Creo que este artículo dice mucho acerca de cómo funciona sticky

¡Cómo funciona realmente CSS Position Sticky! La posición CSS adhesiva tiene dos partes principales, elemento adhesivo y contenedor adhesivo .

Elemento fijo : es el elemento que definimos con la posición: estilos fijos. El elemento flotará cuando la posición de la ventana top: 0px coincida con la definición de posición, por ejemplo: top: 0px .

Contenedor fijo: es el elemento HTML que envuelve el elemento fijo. Esta es el área máxima en la que el elemento adhesivo puede flotar.

Cuando define un elemento con posición: pegajoso, ¡está definiendo automáticamente el elemento padre como un contenedor adhesivo!

Answer 4

Es VERDADERO que el overflow debe eliminarse o establecerse en initial para hacer la position: sticky funciona en el elemento secundario. Utilicé Material Design en mi aplicación Angular y descubrí que algunos componentes de Material cambiaron el valor de overflow . La solución para mi escenario es

mat-sidenav-container, mat-sidenav-content {
overflow: initial;
}

Answer 5

Esta es una continuación de las respuestas de MarsAndBack y Miftah Mizwar.

Sus respuestas son correctas. Sin embargo, es difícil identificar los antepasados ​​problemáticos.

Para simplificar esto, simplemente ejecute este script jQuery en la consola de su navegador y le indicará el valor de la propiedad de desbordamiento en cada antepasado.

$(''.your-sticky-element'').parents().filter(function() {
console.log($(this));
console.log($(this).css(''overflow''));
return $(this).css(''overflow'') === ''hidden'';
});

Donde un antepasado no tiene overflow: visible cambia su CSS para que lo tenga!

Además, como se indicó en otra parte, asegúrese de que su elemento adhesivo tenga esto en el CSS:

.your-sticky-element {
position: sticky;
top: 0;
}

Answer 6

Momento divertido que no era obvio para mí: al menos en la position: sticky Chrome 70 position: sticky no se aplica si lo configuró usando DevTools.

Answer 7

Parece que la barra de navegación a pegar no debería estar dentro de ningún div o sección con otro contenido. Ninguna de las soluciones funcionó para mí hasta que saqué la barra de navegación del div que la barra de navegación compartía con otra barra superior. Anteriormente tenía la barra superior y la barra de navegación envueltas con un div común.

Answer 8

Pocas cosas más me he encontrado:

Cuando su elemento adhesivo es un componente (angular, etc.)

• Si el elemento ''adhesivo'' en sí mismo es un componente con un selector de elementos personalizado, como un componente angular llamado <app-menu-bar> , deberá agregar lo siguiente al css del componente:

  :host { display: block; } 

  o

  app-menu-bar { display: block; } // (in the containing component''s css)

  Safari en iOS en particular parece requerir display:block incluso en la raíz del elemento app-root de una aplicación angular o no se pegará.

• Si está creando un componente y está definiendo el CSS dentro del componente (DOM sombra / estilos encapsulados), asegúrese de que la position: sticky se esté aplicando al selector ''externo'' (por ejemplo, app-menu-bar en devtools debería mostrar el adhesivo posición) y no un div nivel superior dentro del componente. Con Angular, esto se puede lograr con :host selector de :host en el CSS para su componente.

  :host
  {
  position: sticky;
  display: block; // this is the same as shown above
  top: 0;
  background: red;
  }

Otro

• Si el elemento que sigue a su elemento adhesivo tiene un fondo sólido, debe agregar lo siguiente para evitar que se deslice debajo:

  .sticky-element { z-index: 100; }
  .parent-of-sticky-element { position: relative; }

• Su elemento adhesivo debe ser primero (antes de su contenido) si usa top y luego si usa bottom .

• Hay complicaciones al usar el overflow: hidden en su elemento envoltorio; en general, matará el elemento adhesivo en el interior. Mejor explicado en esta pregunta

• Los navegadores móviles pueden deshabilitar elementos fijos / fijos cuando el teclado en pantalla está visible. No estoy seguro de las reglas exactas (¿alguien lo sabe?) Pero cuando el teclado está visible, estás viendo una especie de ''ventana'' en la ventana y no podrás hacer que las cosas se peguen fácilmente. parte superior visible real de la pantalla.

• Asegúrate de tener:

  position: sticky;

  y no

  display: sticky;

Diversas preocupaciones de usabilidad

• Tenga cuidado si su diseño requiere pegar cosas en la parte inferior de la pantalla en dispositivos móviles. En el iPhone X, por ejemplo, muestran una línea estrecha para indicar la región de deslizamiento (para volver a la página de inicio), y no se puede hacer clic en los elementos dentro de esta región. Entonces, si pega algo, asegúrese de probar en el iPhone X que los usuarios pueden activarlo. ¡Un gran botón ''Comprar ahora'' no sirve si la gente no puede hacer clic en él!
• Si está anunciando en Facebook, la página web se muestra en un control de ''vista web'' dentro de las aplicaciones móviles de Facebook. Especialmente cuando se muestran videos (donde su contenido comienza solo en la mitad inferior de la pantalla), a menudo desordenan completamente los elementos adhesivos al colocar su página dentro de una ventana de visualización desplazable que realmente permite que sus elementos adhesivos desaparezcan en la parte superior de la página. Asegúrese de realizar la prueba en el contexto de un anuncio real y no solo en el navegador del teléfono o incluso en el navegador de Facebook, que pueden comportarse de manera diferente.

Answer 9

Sé que esta es una publicación anterior. Pero si hay alguien como yo que recientemente comenzó a jugar con la posición: pegajoso, esto puede ser útil.

En mi caso, estaba usando position: sticky como elemento de cuadrícula. No funcionaba y el problema era un overflow-x: oculto en el elemento html . Tan pronto como eliminé esa propiedad, funcionó bien. Tener overflow-x: oculto en el elemento del body parecía funcionar, aunque todavía no tengo idea de por qué.

Answer 10

Si el arreglo de danday74 no funciona, verifique que el elemento padre tenga una altura.

En mi caso tuve dos hijos, uno flotando a la izquierda y otro flotando a la derecha. Quería que el flotante correcto se volviera pegajoso, pero tuve que agregar un <div style="clear: both;"></div> al final del padre, para darle altura.

Answer 11

Tengo el mismo problema, y ​​encontré la respuesta here .

Si su elemento no se pega como se esperaba, lo primero que debe verificar son las reglas aplicadas al contenedor.

Específicamente, busque cualquier propiedad de desbordamiento establecida en el padre. No puede usar : overflow: hidden , overflow: scroll o overflow: auto en el elemento primario de una position: sticky elemento position: sticky .

Answer 12

Tuve que usar el siguiente CSS para que funcionara:

.parent {
display: flex;
justify-content: space-around;
align-items: flex-start;
overflow: visible;
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
}

Si lo anterior no funciona, entonces ...

Revisa todos los ancestros y asegúrate de que ninguno de estos elementos tenga overflow: hidden . Tienes que cambiar esto a overflow: visible

Answer 13

de mi comentario:

position:sticky necesita un coordinador para decir dónde quedarse

nav {
position: sticky;
top: 0;
}
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato", sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover {
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}
body {
height: 200vh;
}

<nav>
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>

Hay polyfill para usar en otros navegadores que no sean FF y Chrome. Esta es una regla experimental que se puede implementar o no en cualquier momento a través de los navegadores. Chrome lo agregó hace un par de años y luego lo dejó caer, parece que regresó ... ¿pero por cuánto tiempo?

La posición más cercana sería: relativa + coordinadas actualizadas mientras el desplazamiento una vez alcanzado el punto fijo, si desea convertir esto en un script javascript

Answer 14

dos responden aquí:

1. eliminar la propiedad de overflow de body etiqueta del body

2. establecer height: 100% al body para solucionar el problema con overflow-y: auto

min-height: 100% no funciona en lugar de height: 100%