Je veux faire en sorte que la barre de navigation reste en haut lorsque je la fais défiler, mais cela ne fonctionne pas et je ne sais pas pourquoi. Si vous pouvez m'aider, voici mon code HTML et 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>
Vérifiez si un élément ancêtre a un overflow activé (par exemple overflow:hidden
) ; essayez de le basculer. Vous devrez peut-être remonter l'arbre DOM plus haut que prévu =).
Cela peut affecter votre position:sticky
sur un élément descendant.
Le positionnement collant est un hybride du positionnement relatif et du positionnement fixe. L'élément est traité comme étant positionné de manière relative jusqu'à ce qu'il franchisse un seuil spécifié, auquel cas il est traité comme étant positionné de manière fixe.
...
Vous devez spécifier un seuil avec au moins un élément parmi top
, right
, bottom
, ou left
pour que le positionnement collant se comporte comme prévu. Sinon, il sera impossible de le distinguer du positionnement relatif.
[[source : MDN][1]]
Donc, dans votre exemple, vous devez définir la position où il doit coller à la fin en utilisant la propriété 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>
[1] : https://developer.mozilla.org/en-US/docs/Web/CSS/position?v=example#Sticky_positioning
de mon commentaire :
position:sticky
nécessite un coordonné pour savoir où coller.
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>
Il existe des polyfill à utiliser pour d'autres navigateurs que FF et Chrome. Il s'agit d'une règle expérimentale qui peut être mise en œuvre ou non à tout moment par les navigateurs. Chrome l'a ajouté il y a quelques années puis l'a abandonné, il semble de retour ... mais pour combien de temps ?
Le plus proche serait position:relative + coordonnées mises à jour pendant le défilement une fois atteint le point de collage, si vous voulez transformer cela en un script javascript.