"Position: sticky;" werkt niet CSS en HTML

Ik wil de navigatiebalk bovenaan laten plakken als ik ernaartoe scroll, maar het'werkt niet en ik heb geen idee waarom. Als je alsjeblieft kunt helpen, hier is mijn HTML en CSS code:

.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>
Programmering
html css
30ste6 april 2017 в 1:43
Nog geen meningen

Controleer of een voorouder element overflow heeft ingesteld (b.v. overflow:hidden); probeer het aan te zetten. Het kan zijn dat je hoger in de DOM boom moet gaan dan je verwacht =).

Dit kan invloed hebben op je position:sticky op een descendant element.

LGSon
Bewerkt antwoord 5de0 november 2018 в 6:41
Commentaren (9)
Oplossing

Sticky positionering is een hybride van relatieve en vaste positionering. Het element wordt als relatief gepositioneerd beschouwd totdat het een bepaalde drempel overschrijdt, waarna het als vast gepositioneerd wordt beschouwd.
...
U moet een drempel opgeven met minstens een van top, right, bottom, of left voor sticky positioning om zich te gedragen zoals verwacht. Anders zal het niet te onderscheiden zijn van relatieve positionering. [bron: MDN]

Dus in jouw voorbeeld moet je de positie bepalen waar het uiteindelijk moet blijven plakken door de top eigenschap te gebruiken.

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>
Marvin
Bewerkt antwoord 26ste1 september 2017 в 5:26
Commentaren (4)

uit mijn commentaar:

position:sticky heeft een coordonate nodig om te tel waar te plakken

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>

Er is een polyfill te gebruiken voor andere browsers dan FF en Chrome . Dit is een experimentele regel die kan worden geïmplementeerd of niet op elk gewenst moment door browsers. Chrome voegde het een paar jaar geleden en dan liet het, het lijkt terug ... maar voor hoe lang?

Het dichtst zou zijn position:relative + coordonates bijgewerkt tijdens het scrollen zodra bereikt het kleverige punt, als je wilt om dit te zetten in een javascript script

G-Cyr
Bewerkt antwoord 25ste3 juli 2019 в 5:54
Commentaren (0)