web-dev-qa-db-fra.com

"Position: collante;" ne fonctionne pas CSS et HTML

Je souhaite que la barre de navigation reste en haut une fois que je l'ai fait 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>

htmlcss
64
Harleyoc1

Le positionnement collant est un hybride de positionnement relatif et fixe. L'élément est traité en tant que position relative jusqu'à ce qu'il dépasse un seuil spécifié, point auquel il est traité en position fixe.
...
Vous devez spécifier un seuil avec au moins l'un des top, right, bottom ou left pour que le positionnement correct se comporte comme prévu. Sinon, il sera impossible de distinguer le positionnement relatif . [ source: MDN ]

Donc, dans votre exemple, vous devez définir la position à laquelle il doit coller 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>

80
Marvin

Vérifiez si un élément ancêtre a un dépassement de capacité défini (par exemple, overflow:hidden); essayez de le basculer. Vous devrez peut-être monter l’arbre DOM plus haut que prévu =).

Cela peut affecter votre position:sticky sur un élément descendant.

125
MarsAndBack

J'ai le même problème, et j'ai trouvé la réponse ici .

Si votre élément ne colle pas comme prévu, la première chose à vérifier sont les règles appliquées au conteneur.

Plus précisément, recherchez toute propriété de dépassement définie sur le parent. Vous ne pouvez pas utiliser: overflow: hidden, overflow: scroll ou overflow: auto sur le parent d'un élément position: sticky.

58
Miftah Mizwar

Peu de choses que j'ai rencontrées:

Lorsque votre élément collant est un composant (angulaire, etc.)

  • Si l'élément 'sticky' est lui-même un composant avec un sélecteur d'élément personnalisé, tel qu'un composant angulaire nommé <app-menu-bar>, vous devrez ajouter ce qui suit au fichier css du composant:

    :Host { display: block; }

    ou 

    app-menu-bar  { display: block; }   // (in the containing component's css)

    Safari sur iOS en particulier semble nécessiter display:block même sur l’élément racine app-root d’une application angulaire, sinon elle ne collera pas.

  • Si vous créez un composant et définissez le css à l'intérieur du composant (shadow DOM/styles encapsulés), assurez-vous que le position: sticky est appliqué au sélecteur 'externe' (par exemple, app-menu-bar dans devtools devrait afficher la position collante) et non un sommet. niveau divintra le composant. Avec Angular, cela peut être réalisé avec le sélecteur :Host dans le css de votre composant.

    :Host
{
    position: sticky;
    display: block;   // this is the same as shown above
    top: 0;
    background: red;    
}

Autre

  • Si l'élément suivant votre élément collant a un arrière-plan solide, vous devez ajouter ce qui suit pour l'empêcher de glisser en dessous:

    .sticky-element { z-index: 100; }
.parent-of-sticky-element { position: relative; }

  • Votre élément collant doit être en premier (avant votre contenu) si vous utilisez top et après si vous utilisez bottom.

  • Il existe des complications lors de l’utilisation de overflow: hidden sur votre élément d’emballage - en général, il tue l’élément collant à l’intérieur. Mieux expliquée dans cette question

  • Les navigateurs mobiles peuvent désactiver les éléments fixes/collants lorsque le clavier à l'écran est visible. Je ne suis pas sûr des règles exactes (est-ce que quelqu'un le sait jamais) mais quand le clavier est visible, vous regardez une sorte de "fenêtre" dans la fenêtre et vous ne serez pas facilement en mesure de faire en sorte que les choses restent collées au clavier. visible en haut de l'écran.

  • Assurez-vous que vous avez:

    position: sticky;

    et pas

    display: sticky;

15
Simon_Weaver

Ceci est la suite des réponses de MarsAndBack et Miftah Mizwar.

Leurs réponses sont correctes. Cependant, il est difficile d'identifier le ou les ancêtres à problèmes.

Pour simplifier les choses, exécutez simplement ce script jQuery dans la console de votre navigateur et il vous indiquera la valeur de la propriété overflow sur chaque ancêtre.

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

Lorsqu'un ancêtre n'a pas overflow: visible, changez son CSS pour qu'il le fasse!

De plus, comme indiqué ailleurs, assurez-vous que votre élément collant a ceci dans le CSS:

.your-sticky-element {
    position: sticky;
    top: 0;
}
10
danday74

de mon commentaire:

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 y a 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 via les navigateurs. Chrome l'ajoute il y a quelques années et l'a laissé tomber, il semble revenir… mais pour combien de temps?

Le plus proche serait la position: les coordonnées relatives + mises à jour lors du défilement une fois atteint le point collant, si vous voulez transformer cela en un script javascript.

3
G-Cyr

Je devais utiliser le CSS suivant pour le faire fonctionner:

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
2
Unicco

Moment drôle qui n’était pas évident pour moi: au moins dans Chrome 70, position: sticky n’est pas appliqué si vous l’avez défini avec DevTools.

2
i.k

Il semble que la barre de navigation à coller ne devrait pas être dans une div ou une section avec un autre contenu. Aucune de la solution ne fonctionnait pour moi jusqu'à ce que je retire la barre de navigation de la div que la barre de navigation partageait avec une autre barre supérieure. J'avais précédemment la barre de navigation et la barre de navigation entourées d'un div commun.

1
solaris333

deux répondent ici:

  1. supprimer la propriété overflow de la balise body

  2. définissez height: 100% sur body pour résoudre le problème avec overflow-y: auto

min-height: 100% non fonctionnel au lieu de height: 100%

1
Javad Ebrahimi

Il est VRAI que la overflow doit être supprimée ou définie sur initial pour que position: sticky fonctionne sur l'élément enfant. J'ai utilisé Material Design dans mon application Angular et j'ai découvert que certains Les composants matériels ont changé la valeur overflow. La solution pour mon scénario est 

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

si le correctif de danday74 ne fonctionne pas, vérifiez que l'élément parent a une hauteur.

Dans mon cas, j'avais deux enfants, un flottant à gauche et un flottant à droite. Je voulais que le flottant de droite devienne collant, mais je devais ajouter un <div style="clear: both;"></div> à la fin du parent pour lui donner une hauteur.

0
Flo

Je sais que c'est un ancien post. Mais s'il y a quelqu'un comme moi qui vient de commencer à jouer avec sa position: collant, cela peut être utile.

Dans mon cas, j'utilisais position: collant comme élément de grille. Cela ne fonctionnait pas et le problème était un overflow-x: caché sur l'élément html. Dès que j'ai enlevé cette propriété cela a bien fonctionné. Avoir overflow-x: caché sur l'élément body semblait fonctionner, mais nous ne savions pas pourquoi.

0
Marco Peralta

Je crois que cet article peut démystifier beaucoup le fonctionnement de sticky

Comment la position collante de CSS fonctionne vraiment! La position CSS collante a deux parties principales, un article collant et un contenant collant .

Article collant - est l'élément que nous avons défini avec la position: styles collants. L'élément flottera lorsque la position de la fenêtre correspond à la définition de la position, par exemple: top: 0px.

Sticky Container : élément HTML enveloppant l'élément collant. Il s'agit de la zone maximale dans laquelle l'élément collant peut flotter.

Lorsque vous définissez un élément avec position: sticky, vous définissez automatiquement l’élément parent en tant que conteneur collant!

0
yuval.bl