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>

.la tête a une hauteur de 150 px. .barre de navigation a une hauteur de 20 pixels. Lorsque l'utilisateur fait défiler, je veux .barre de navigation à coller en haut. Je suis donc allé à la CSS position:collant et haut:0. Mais cela n'a pas fonctionné. J'ai d'abord pensé que firefox n'est pas en position de soutien:collant, mais ce n'est pas le cas parce que j'étais en mesure de voir un travail de démonstration. J'ai cherché sur google mais rien trouvé d'utile. Quelqu'un sait pourquoi cela ne fonctionne pas?

Puisque vous ne montrez pas votre css... Collant ne fonctionne que si le div contenant (en-tête) n'a pas de débordement cachés ou auto. Peut-être quelque chose à vérifier.
Pour quelqu'un d'autre à la recherche dans ce, position: sticky aussi souvent ne fonctionne pas si le parent immédiat est display: flex

OriginalL'auteur Wolfuryo | 2017-08-06

  1. 15

    Pour quelqu'un d'autre qui vient à travers cela, la position collant n'a pas de travail pour moi en raison de la body élément ayant overflow-x: hidden; ensemble.

    Vous juste m'a sauvé beaucoup de temps. Faisait des restyling et ne comprenait pas pour la vie de moi pourquoi la position collant cessé de travailler. S'avère une 3ème partie a été l'ajout de dépassement de styles sur le code html et le corps. Pouah!
    Cela m'a beaucoup aidée aussi. Merci!
    Voici un rapport de bogue sur ce bugzilla.mozilla.org/show_bug.cgi?id=1329203
    ce qui signifie par exemple overflow:initial !important sur certaines problématiques avec le parent du travail ou l'on peut tester avec elle

    OriginalL'auteur nickspiel

  2. 1

    En quelque sorte votre code ne fonctionne que lorsque le .navbar élément n'est pas dans un autre contenant, comme l'en-tête. J'ai déménagé et puis, il fonctionne très bien. J'ai créé un codepen extrait de code pour que, 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>

    Maintenant position:sticky est pris en charge assez bon comme vous pouvez le voir sur canIuse. Bien sûr, IE ne supporte pas, mais la nouvelle version de Bord apportera plein soutien pour de cette! J'ai trouvé quelques articles intéressants sur ce sujet:

    Mais il y a de bonnes nouvelles à l'horizon. Je pense que la meilleure prise en charge du navigateur suivra la prochaine fois.

    Merci pour la réponse!

    OriginalL'auteur Gerrit Halfmann

  3. 0

    Votre code HTML car il est

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

    et d'écriture de la 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;
}

    Espère que cela aidera

    J'ai déjà essayé, sans succès. J'ai essayé d'ajouter d'assemblage:collant et haut:0 à l' .élément d'en-tête et que ça fonctionne, mais ce n'est pas ce que je veux.
    J'ai essayé de déplacer la barre de navigation à partir de l'en-tête du conteneur, il est de travail

    OriginalL'auteur M Thomas