¿Cómo funciona la "posición: pegajosa"? ¿trabajo inmobiliario?

Quiero que la barra de navegación se quede en la parte superior de la ventana gráfica una vez que un usuario se desplaza por la página, pero no funciona y no tengo idea de por qué. Si puedes ayudarme, aquí está mi código HTML y CSS:

.container {
  min-height: 300vh;
}
.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;
}

<main class="container">
  <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>
</main>

Expandir fragmento

Apr 30 '17 20:04 Harleyoc1

Compruebe si un elemento ancestro tiene un conjunto de desbordamiento (p. ej. overflow:hidden); intenta alternarlo. Es posible que tengas que inspeccionar el árbol DOM más alto de lo esperado =).

Esto puede afectar su position:stickyelemento descendiente.

Dec 19 '2017 00:12 Kalnode

El posicionamiento adhesivo es un híbrido de posicionamiento relativo y fijo. El elemento se trata como en posición relativa hasta que cruza un umbral específico, momento en el que se trata como en posición fija.
...
Debe especificar un umbral con al menos uno de top , right, bottomo left para que el posicionamiento fijo se comporte como se espera. De lo contrario, será indistinguible del posicionamiento relativo. [ fuente: MDN ]

Entonces, en tu ejemplo, debes definir la posición donde debería permanecer al final usando 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>

Expandir fragmento

Apr 30 '2017 13:04 Marvin

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

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

Específicamente, busque cualquier propiedad de desbordamiento establecida en cualquiera de los padres del elemento. No puedes usar : overflow: hiddeno en el padre de un overflow: scrollelemento .overflow: autoposition: sticky

Mar 03 '2018 04:03 Miftah Mizwar