web-dev-qa-db-fra.com

Pourquoi ma position: collante ne fonctionne pas sur iOS?

Je suis en train de coder une barre de notification collante située au bas d'un écran mobile. Je veux que la barre soit bloquée en bas de l'écran des utilisateurs jusqu'à ce que l'utilisateur ait atteint la position de défilement de l'endroit où la barre est réellement positionnée dans le code (juste avant le pied de page de la page). J'ai à peu près copié l'exemple "docteur" de cette page: https://alligator.io/css/position-sticky/ Mon problème est: sur ma page, la barre fonctionne bien lorsque vous utilisez = Android Appareils ou lors de la simulation d'un appareil mobile en ajustant la largeur du navigateur sur mon ordinateur de bureau. Cependant, sur iOS, la barre n'est pas collante, c'est-à-dire qu'elle se trouve juste à sa position et ne colle pas à en bas de l'écran jusqu'à ce qu'il soit atteint. Cela s'applique à la fois à Safari et à Google Chrome. La chose étrange est: sur la page alligator.io mentionnée précédemment, cela fonctionne très bien sur mon appareil iOS.

Je soupçonne que c'est une sorte de problème Webkit lié au code entourant la barre, mais je ne peux pas l'isoler. J'ai essayé le débogage en ajustant autant que possible mon code à l'exemple de alligator.io, mais je n'arrive pas à le faire fonctionner. J'ai également essayé de rechercher n'importe quel débordement: auto dans les éléments parents - sans succès. J'essaie de résoudre ce problème depuis plusieurs heures et je suis malade et fatigué du problème et je pourrais utiliser une autre paire d'yeux pour m'aider à trouver ce que je néglige.

<a href="#" class="jobAlertToggle">
    <div id="jobalarm_mobile">
        <i class="fa fa-bell"></i>
        <span>Jobalarm aktivieren</span>
        <label class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
        </label>
    </div>
</a>

#jobalarm_mobile {
    display: table;
    font-size: 18px;
    width: 100%;
    height: 40px;
    background: #ff8400;
    color: white;
    font-weight: 400;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    bottom: -50px;
    align-self: flex-end;
}

Vous pouvez visiter la page en direct sur laquelle je travaille (masquée à la demande du client, veuillez me contacter en privé). Lancez simplement une recherche (suggérée) et la barre apparaîtra (ou non, si vous utilisez iOS ...) Merci d'avance pour votre aide.

ioscsswebkitsticky
14
c42

Certains des conseils de ma réponse ici peuvent aider, notamment en ajoutant display: block à votre conteneur peut faire l'affaire.

1
Simon_Weaver

Utiliser pour ios position: -webkit-sticky et pour les autres cas position: sticky

1
Алена Сорока

Pour moi, rien n'a fonctionné sauf jQuery/javascript de cette façon: donnez à l'élément dont vous avez besoin d'être collant la position: absolue et gauche: 0, puis utilisez javascript pour calculer le décalage de la fenêtre à gauche, et ajoutez ce décalage à la propriété gauche de votre élément:

#stickyElement {
        position: absolute;
        left: 0;
     }

  function scrolling(){
       $('.someElementScrollingLeft').on('scroll', function() {
           let offset = $(this).scrollLeft();
           /* For me it only didn't work on phones, so checking screen size */
           if($( window ).width() <= 768)
           {
              let stickyElement = $('#stickyElement');
              stickyElement.css("left", offset);
            } 
         });
   }
0
Armin
i visit the website may be i found solution for you 
try this its may can help you:

//firstly remove
 //you repeat that in your code

        #jobalarm_mobile {
             display: none !important;       
        }

puis placez votre notification <a> tag à la fin (après <footer> tag)

//write this css
     .jobAlertToggle{
              display: none;
           }
        @media (max-width: 767px)
          .jobAlertToggle{
              display: block;
              width: 100%;
              position:sticky;
              position:-webkit-sticky;
              bottom:-50px;
           }

          #jobalarm_mobile {
               display: table;
               font-size: 18px;
               width: 100%;
               height: 40px;
               background: #ff8400;
               color: white;
               font-weight: 400;
               text-align: center;
               -webkit-align-self: flex-end;
               align-self: flex-end;
           }
0
Hammad tariq