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

Quiero hacer que la barra de navegación se pegue a la parte superior una vez que me desplazo a ella, pero no funciona y no tengo idea de por qué. Si usted puede ayudar por favor, 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>

...fin del fragmento..;

Programación
html css
30º abril 2017 в 1:43
No hay vistas aún

Comprueba si un elemento antecesor tiene activado el desbordamiento (por ejemplo, overflow:hidden); intenta activarlo. Puede que tengas que subir el árbol DOM más arriba de lo que esperas =).

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

LGSon
Respuesta editada 5º noviembre 2018 в 6:41
Comentarios (9)
Solución

El posicionamiento fijo es un híbrido entre el posicionamiento relativo y el fijo. El elemento se trata como posicionado relativo hasta que cruza un umbral especificado, momento en el que se trata como posicionado fijo.
...
Debe especificar un umbral con al menos una de las opciones top, right, bottom, o left para que el posicionamiento fijo se comporte como se espera. De lo contrario, será indistinguible del posicionamiento relativo. [fuente: MDN]

Así que en tu ejemplo, tienes que definir la posición donde debe pegarse al final usando la propiedad top.

begin snippet: js hide: false console: true babel: false -->

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

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

...fin del fragmento..;

Marvin
Respuesta editada 26º septiembre 2017 в 5:26
Comentarios (4)

de mi comentario:

position:sticky necesita un coordonate para tel donde pegar

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

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

...fin del fragmento..;

Hay polyfill para utilizar para otros navegadores que FF y Chrome . Es una regla experimental que puede ser implementada o no en cualquier momento a través de los navegadores. Chrome lo añadió hace un par de años y luego lo abandonó, parece que ha vuelto... ¿pero por cuánto tiempo?

Lo más cercano sería position:relative + coordonates actualizados mientras se desplaza una vez alcanzado el punto pegajoso, si desea convertir esto en un script javascript

G-Cyr
Respuesta editada 25º julio 2019 в 5:54
Comentarios (0)