11
votes

Comment utiliser la méthode Top de défilement

L'en-tête sur le rouleau doit glisser comme indiqué dans la jQuery, cependant, dans Mobile IOS, cela ne se produit pas et les Headers Judders en haut de l'écran?

Ceci fonctionne sur Chrome, Mozilla Firefox, Internet Explorer et Safari - sur les gros navigateurs. p>

est-ce que cela se produise en raison d'une utilisation incorrecte de la méthode Haut de défilement? Comment puis-je corriger cela? P>

<script src=	"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<header>
  <div class="header-wrapper">
    <div class="header-bg"></div>
    <div class="header-content">
      <ul>
        <li>
        <a href="" class="logo">Logo </a>
        </li>
      </ul>
    </div>
  </div>
</header>
<content>
<div class="stage stage-0">1</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>
</content>

javascript jquery html css

9 commentaires

Essayez d'abaisser la hauteur de ScrollTop pour voir si cela change quelque chose, avait un problème similaire comme celui-ci une fois et je crois que cela a été causé par l'écran ne faisant pas assez de «haute» qui le fait bégayer

Dans le code JQuery que vous avez fourni. ScrollTop <= 400 etc. Essayez d'abaisser toutes ces hauteurs

Ajuster ces hauteurs ne résout pas ce problème ...

Je ne vois pas de problème. Quelle version iOS utilisez-vous?

iOS 9.2 - L'en-tête ne tombera pas et les Judders et iOS7.1.2 - L'en-tête ne tombera pas

Activez simplement Webinspector dans vos paramètres iPhone / iPod / iPad, connectez-le via un câble à Mac et essayez de le déboguer à distance. C'est la meilleure solution

Je prévisible dans Adobe Dreamweaver CC. C'est mon premier site et j'enseigne moi-même comme je vais. Je ne sais pas où / comment commencer à chercher cette erreur ... des conseils ou des ressources que vous recommandez?

J'aimerais pouvoir aider mais je suis confus, qu'est-ce que vous essayez de faire.

Cela se produit-il toujours ou seulement quand il n'y a pas de contenu «assez» dans le corps? Par exemple, essayez d'ajouter plus de contenu à celui-ci et de voir si elle est toujours potétrique.

4 Réponses :

1
votes

Essayez ce code

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop(), //Get the current vertical position of the scroll bar for the first element in the set of matched elements
                     header = $('.header-content'); // Target Element

    if(scrollTop > header.offset().top) {
        header.addClass('navbar-fixed-top'); 
    }
}

1 commentaires

Cela ne résout pas le problème? Pouvez-vous fournir un jsfiddle?

1
votes

Les éléments fixes peuvent avoir des effets assez bonsky sur des appareils mobiles en raison de ne pas fonctionner correctement avec des événements tactiles (dans ce cas, le défilement, je suppose).

Je ne suis pas à 100% si c'est le problème ici, mais je pense qu'il y a une bonne possibilité que ce soit.

Il y a quelque chose appelé modernizr ( https://modernizr.com/ ) qui vous aide à détecter toutes les types liés au navigateur Stuff, y compris si cela fonctionne sur un écran tactile ou non. Je ne pense pas qu'il y ait actuellement une vraie solution au mauvais fonctionnement entre les événements tactiles et les éléments fixes, mais avec modernizr, vous pouvez essayer de trouver une sorte de solution de contournement.

Goodluck!

0 commentaires

1
votes

Ce pourrait être parce que vous avez une position imbriquée: fixe code> éléments à l'intérieur d'autres Position: fixe code> éléments. Cela peut parfois causer des bugs étranges sur les mobiles, dans mon expérience.

Essayez donc de remplacer la position : fixe code> ligne de cette règle: p>

.header-bg,
.header-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

0 commentaires

1
votes

Rien d'exécution lors du défilement sur la safari mobile. Vous pouvez simplement mettre un gif dans votre page et vous pouvez voir même cette image GIF a cessé d'être animé lors du défilement.

sur la safari mobile, l'événement "Scroll" ne fait que des incendies une fois la fenêtre a cessé de défilement. Si vous avez vraiment besoin de surveiller l'événement de défilement et de faire certaines choses selon ScrollTop en temps réel. Vous avez besoin d'une tierce partie libelle telle que iScroll dans GitHub .

Il a utilisé 'Traduire' pour simuler l'effet 'Scroll' ''.

0 commentaires