Position: collante ne fonctionne pas

Question

je le 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 150 pixels. .navbar a une hauteur de 20px. Quand l'utilisateur défile, je veux que .navbar reste en haut. Je suis donc allé au CSS et j'ai mis la position: sticky et top: 0. Mais cela n'a pas fonctionné. J'ai d'abord pensé que firefox ne supporte pas la position: sticky, mais ce n'est pas le cas car j'ai pu voir une démo de travail. Je ai googlé à ce sujet, mais n'a trouvé rien d'utile. Quelqu'un sait pourquoi cela ne fonctionne pas?

Answer 1

Il fonctionne très bien si vous déplacez la barre de navigation en dehors de l'en-tête . Voir ci-dessous. Pour la raison, selon MDN:

L'élément est positionné en fonction du débit normal du document, puis décalé par rapport à sa racine d'écoulement et contenant bloc sur la base des valeurs de haut, à droite , en bas et à gauche.

Pour le bloc contenant:

Le bloc contenant est l'ancêtre auquel l'élément est relativement positionné

Alors, quand je ne vous méprenez pas, la barre de navigation est positionné à offset 0 dans l'en-tête dès qu'il défile à l'extérieur de la fenêtre (ce qui, évidemment, signifie que vous ne pouvez plus le voir).

.navbar { 
 
    background: hotpink; 
 
    width: 100%; 
 
    height: 50px; 
 
    position: -webkit-sticky; 
 
    position: sticky; 
 
    top: 0; 
 
} 
 

 
.header { 
 
    height: 150px; 
 
    background: grey; 
 
} 
 

 
body { 
 
    height: 800px; 
 
    position: relative; 
 
}

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

 
<div class="navbar"></div>

Answer 2

Votre code HTML comme il est

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

et écrire 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; 
} 

Hope cela aidera

Answer 3

D'une certaine manière votre code ne fonctionne que lorsque l'élément .navbar n'est pas dans un autre récipient comme l'en-tête. Je l'ai déplacé et ça fonctionne bien. I created a codepen snippet for that, check it out

<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> 

En ce moment position:sticky est pris en charge très bien que vous pouvez voir sur canIuse. Bien sûr, IE n'a actuellement aucun support mais la nouvelle version Edge apportera un support complet pour cela! J'ai trouvé quelques articles intéressants sur ce sujet:

• démonstration de travail (chrome, firefox) https://codepen.io/simevidas/pen/JbdJRZ
• Caniuse refernce: http://caniuse.com/#search=sticky
• article collant sur MDN, y compris la plus récente table de support du navigateur https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

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

Answer 4

Pour toute autre personne rencontrée, la position collante ne fonctionnait pas pour moi en raison de l'élément body ayant overflow-x: hidden; ensemble.