web-dev-qa-db-fra.com

position: collant ne fonctionne pas

J'ai ce code HTML:

<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>

.header a une hauteur de 150px. .navbar a une hauteur de 20px. Lorsque l'utilisateur fait défiler, je veux que .navbar reste en haut. Alors je suis allé au CSS et mis la position: collant et top: 0. Mais cela n'a pas fonctionné. Au départ, je pensais que firefox n’était pas un support: collant, mais ce n’est pas le cas, car j’ai pu en voir une démonstration. J'ai cherché sur Google mais je n'ai rien trouvé d'utile. Quelqu'un sait pourquoi cela ne fonctionne pas?

csspositionnavbarsticky
8
Wolfuryo

Pour les autres utilisateurs, la position post-it ne fonctionnait pas pour moi car l'élément body avait overflow-x: hidden; set.

12
nickspiel

D'une manière ou d'une autre, votre code ne fonctionne que lorsque l'élément .navbar ne se trouve pas dans un autre conteneur comme l'en-tête. Je l'ai déménagé et puis ça fonctionne bien. J'ai créé un extrait de code pour cela, regardez-le

<header>
    <div class="logo">Logo</div>
    <div class="description"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, veritatis.</div></div>
</header>
<div class="navbar">
    <ul>
        <li><a href="#">navitem1</a></li>
        <li><a href="#">navitem2</a></li>
        <li><a href="#">navitem3</a></li>
        <li><a href="#">navitem4</a></li>
    </ul>
</div>

Pour le moment, position:sticky est pris en charge, comme vous pouvez le constater sur canIuse. Bien sûr, IE n’a actuellement aucun support, mais la nouvelle version d’Edge apportera un support complet pour cela! J'ai trouvé des articles intéressants sur ce sujet:

Mais il y a de bonnes nouvelles à l'horizon. Je pense qu'un meilleur support du navigateur suivra la prochaine fois.

1
Gerrit Halfmann

Votre code HTML tel quel

<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>

et écrire une classe CSS pour la barre de navigation

.header {
height: 150px;
background-color: #d1d1d1;
}

.navbar {
  background: #999;
  border-bottom: 1px solid #333;
  border-top: 1px solid #333;
  color: #FFF;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

J'espère que cela aidera

0
M Thomas