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

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>

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 leftpara el posicionamiento pegajosa a comportarse como se esperaba. De lo contrario, será indistinguible del posicionamiento relativo. [ fuente: MDN ]

Entonces, en su ejemplo, debe definir la posición en la que debería quedarse al final utilizando la toppropiedad.

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>

Compruebe si un elemento ancestro tiene un conjunto de desbordamiento (p overflow:hidden. Ej. ); intenta alternarlo. Puede que tengas que subir el árbol DOM más alto de lo que esperas =).

Esto puede afectar su position:stickyelemento descendiente.

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

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 se puede utilizar : overflow: hidden, overflow: scrollo overflow: autoen el padre de un position: stickyelemento.

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:blockincluso en el elemento raíz app-rootde 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 position: stickyse esté aplicando al selector 'externo' (por ejemplo, app-menu-baren devtools debe mostrar la posición fija) y no un nivel superior div dentro el componente. Con Angular, esto se puede lograr con el :hostselector 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 el primero (antes de su contenido) si lo usa topy después si lo usa bottom.

• Hay complicaciones cuando se usa overflow: hiddenen su elemento de envoltura; 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 adhieran 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.

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 que overflow: visiblecambiar su CSS para que lo haga!

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;
}

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 aoverflow: visible

En caso de que te hayas encontrado con esto y tu pegajoso no funcione, intenta configurar el padre para que:

display: unset

Trabajó para mi

Momento divertido que no era obvio para mí: al menos en Chrome 70 position: stickyno se aplica si lo ha configurado con DevTools.

Parece que la barra de navegación a pegar no debe 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.

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

Sé que esto parece estar ya respondido, pero me encontré con un caso específico y siento que la mayoría de las respuestas pierden el punto.

Las overflow:hiddenrespuestas cubren el 90% de los casos. Ese es más o menos el escenario de "navegación fija".

Pero el comportamiento pegajoso se usa mejor dentro de la altura de un contenedor. Piense en un formulario de boletín informativo en la columna derecha de su sitio web que se desplaza hacia abajo con la página. Si su elemento adhesivo es el único elemento secundario del contenedor, el contenedor tiene exactamente el mismo tamaño y no hay espacio para desplazarse.

Su contenedor debe tener la altura a la que espera que se desplace su elemento. Que en mi escenario de "columna derecha" es la altura de la columna izquierda. La mejor manera de lograr esto es usarlo display:table-cellen las columnas. Si no puede, y está atrapado con float:rightcosas como yo, tendrá que adivinar la altura de la columna izquierda para calcularlo con Javascript.

Sé que esta es una publicación anterior. Pero si hay alguien como yo que recientemente comenzó a jugar con la posición: 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 htmlelemento. Tan pronto como eliminé esa propiedad, funcionó bien. Tener overflow-x: oculto en el bodyelemento parecía funcionar, aunque todavía no tengo idea de por qué.

dos responden aquí:

1. eliminar overflowpropiedad de la bodyetiqueta

2. configurado height: 100%para bodysolucionar el problema conoverflow-y: auto

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

Creo que este artículo dice mucho sobre cómo stickyfunciona

¡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 gráfica coincide 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!

El comportamiento real de un elemento adhesivo es:

• Primero es relativo por un tiempo
• entonces se arregla por un tiempo
• finalmente desaparece de la vista

Un elemento posicionado de forma fija se trata como relativamente posicionado hasta que su bloque que contiene cruza un umbral específico (como establecer la parte superior en un valor distinto de auto) dentro de su raíz de flujo (o el contenedor en el que se desplaza), en cuyo punto se trata como "atascado" "hasta encontrar el borde opuesto de su bloque contenedor.

El elemento se posiciona de acuerdo con el flujo normal del documento y luego se desplaza en relación con su ancestro de desplazamiento más cercano y el bloque que contiene (ancestro de nivel de bloque más cercano), incluidos los elementos relacionados con la tabla, basados ​​en los valores de arriba, derecha, abajo, E izquierda. El desplazamiento no afecta la posición de ningún otro elemento.

Este valor siempre crea un nuevo contexto de apilamiento. Tenga en cuenta que un elemento adhesivo "se adhiere" a su antepasado más cercano que tiene un "mecanismo de desplazamiento" (creado cuando el desbordamiento está oculto, desplazarse, auto o superposición), incluso si ese antepasado no es el ancestro desplazable más cercano.

Este ejemplo te ayudará a entender:

code https://codepen.io/darylljann/pen/PpjwPM

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 la flotante derecha se volviera pegajosa, pero tuve que agregar una <div style="clear: both;"></div>al final del padre, para darle altura.

Usé una solución JS. Funciona en Firefox y Chrome. Cualquier problema, házmelo saber.

html

<body>
  <header id="header">
    <h1>Extra-Long Page Heading That Wraps</h1>
    <nav id="nav">
      <ul>
        <li><a href="" title="">Home</a></li>
        <li><a href="" title="">Page 2</a></li>
        <li><a href="" title="">Page 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p><!-- ridiculously long content --></p>
  </main>
  <footer>
    <p>FOOTER CONTENT</p>
  </footer>
  <script src="navbar.js" type="text/javascript"></script>
</body>

css

nav a {
    background: #aaa;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #bbb;
}

nav li {
    background: #aaa;
    padding: 10px 0;

}

nav ul  {
    background: #aaa;
    list-style-type: none;
    margin: 0;
    padding: 0;

}

@media (min-width: 768px) {

    nav ul {
        display: flex;
    }
}

js

function applyNavbarSticky() {
    let header = document.querySelector('body > header:first-child')
    let navbar = document.querySelector('nav')
    header.style.position = 'sticky'

    function setTop() {
        let headerHeight = header.clientHeight
        let navbarHeight = navbar.clientHeight
        let styleTop = navbarHeight - headerHeight

        header.style.top = `${styleTop}px`
    }

    setTop()

    window.onresize = function () {
        setTop()
    }
}

z-indexTambién es muy importante. A veces funcionará pero simplemente no lo verás. Intente configurarlo en un número muy alto solo para estar seguro. Además, no siempre pones top: 0pero prueba algo más alto en caso de que esté oculto en algún lugar (debajo de una barra de herramientas).

Esto es lo que me estaba haciendo tropezar ... mi div. Adhesivo estaba dentro de otro div, de modo que el div principal necesitaba algún contenido adicional DESPUÉS del div. te desplazas hacia abajo.

Entonces, en mi caso, justo después del div pegajoso, tuve que agregar:

    %div{style:"height:600px;"} 
       

(Mi aplicación tiene dos divisiones de lado a lado, con una imagen "alta" a la izquierda y un formulario de entrada de datos corto a la derecha, y quería que el formulario de entrada de datos flotara junto a la imagen a medida que se desplaza hacia abajo, por lo que el formulario siempre está en la pantalla. No funcionaría hasta que agregue el "contenido adicional" anterior para que el elemento adhesivo tenga algo para "deslizarse"

Es VERDADERO que overflowdebe eliminarse o configurarse initialpara que position: stickyfuncione en el elemento secundario. Usé Material Design en mi aplicación Angular y descubrí que algunos componentes de Material cambiaron el overflowvalor. La solución para mi escenario es

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