Problèmes avec div fixe en bas de page qui s’arrête à un endroit donné

Nous avions besoin d’une barre d’outils de pied de page qui rest en bas de la page et qui colle à certaines zones lorsque la page défile sous cette zone.

Nous avons réalisé ceci en utilisant le script suivant:

div fixe en bas de page qui s’arrête à un endroit donné

Mais il y a un problème sur une page où la barre d’outils de pied de page disparaît de la page, puis réapparaît lorsque la page est défilée davantage.

Nous avons constaté que ce problème particulier n’apparaissait que sur quelques pages, lorsque celle-ci contenait un contenu tel que Images, Vidéo ou Ajax, et que le contenu est rempli (ou que l’espace est rempli) une fois la page chargée.

Je ne sais pas comment résoudre ce problème.

Voici le lien du site en direct avec la page du problème.

http://www.sandiegopchelp.com/services/cellphone-repair/htc/

http://www.sandiegopchelp.com/top-10-tips-to-help-secure-your-computer/

http://www.sandiegopchelp.com/notes-on-the-phablet-does-the-world-need-one /

Il est généralement plus visible sur les blogs avec de nombreux commentaires. Peut-être en raison du chargement des commentaires Disqus après le chargement complet de la page.

Comment ça ressemble?

http://jsfiddle.net/LukeGT/NxSc3/

$(window).scroll(function() { $('#bar').css('position', 'static'); console.log($('#bar').position().top); console.log($(window).scrollTop() + $(window).height()); if ($(window).scrollTop() + $(window).height() < $('#bar').position().top + $('#bar').height()) { $('#bar').css('position', 'fixed'); } }); setTimeout(function() { $('#extra').show(); }, 1000);

J'ai simulé le chargement tardif des images en affichant quelques divs supplémentaires après 1 seconde. Je crois que le problème provient du fait que la hauteur de la page change après que le code de la barre est lancé, donc il se comporte comme il se doit si la page était plus courte (sans les images / ajax, etc.).

Ce que je fais plutôt, c’est de placer la barre à sa place en bas de la page à chaque défilement de la page, de calculer sa hauteur à partir du haut et de la comparer à la hauteur de défilement. Si nous nous trouvons trop loin, la barre se positionne à la base de la page et rest dans l’autre. Cela fonctionne bien dans Chrome, mais je n'ai pas testé ailleurs.

J’imagine que c’est un problème avec la fonction $(window).height() . Vérifiez ici . Pour tous les contenus dynamics tels que les images, la vidéo ou les contenus chargés par Ajax, la hauteur n’est pas ajoutée au résultat de $(window).height() sauf si cela est spécifié quelque part dans le code HTML ou CSS (et dans le lien référé, je vois ceci). ne se produit que dans Chrome. Vous voudrez peut-être confirmer cela). Pour ces contenus dynamics, vous pouvez soit essayer d’append l’atsortingbut height en html ou l’atsortingbut height dans le style correspondant.

Ce n’est pas la solution, mais j’ai trouvé quelque chose lors de l’inspection de votre site Web. C’est votre code HTML actuel quand il fonctionne comme vous le souhaitez.

mais lorsqu’il ne fonctionne pas, l’atsortingbut Position passe de Fixed à Relative .

vous pouvez vérifier votre script pour cela ou poster votre script ici …

A l’état initial, votre div est en position: relative donc son décalage est basé sur l’élément conteneur, et non sur la hauteur totale de la page. La variable stickyOffset est définie en fonction de ce décalage relatif. C’est pourquoi elle se clipse plus tôt que prévu lors du défilement et qu’elle fonctionne également dans votre JSFiddle en tant que conteneur où se trouve la page (Iframe) elle-même.

Dans votre fonction $(document).ready , vous devez append le décalage non seulement du pied de page, mais également le rest du décalage situé au-dessus de l’élément conteneur afin que le décalage soit basé sur la page totale au lieu du contenu. div.

J’espère que cela pourra aider.

En observant votre exemple sur http://www.sandiegopchelp.com/services/cellphone-repair/htc/ à l’ aide de chrome, je constate que votre pied de page disparaît lorsqu’il se trouve dans la section “liens connexes”. À ce moment, vous définissez la position du pied de page sur “relatif” afin qu’il le remplace dans le stream normal du document et que sa position se trouve en dessous de la section “liens connexes”, raison pour laquelle il disparaît de l’écran (sous “liés”). liens”).

mais vous avez calculé la position à laquelle il devrait devenir relatif au chargement de la page uniquement là où vous auriez dû le recalculer après avoir ajouté la section “liens connexes” car il modifie la hauteur de la page (j’ai cru comprendre que vous avez ajouté par la suite, ai-je raison?).

Essayez d’append un div de hauteur zéro juste au-dessus de la position du sticky div, qui restra à cette position au fur et à mesure que la page se redimensionne, puis vérifiez cette position au fur et à mesure que vous faites défiler l’écran pour déterminer la position à laquelle le sticky div doit s’arrêter.

Enfin, il a été corrigé par deux techniques: définir une hauteur explicite dans la mesure du possible à l’aide de CSS et retarder la fonction jQuery après le chargement de toutes les images. Reportez-vous à ceci: Retardez certaines fonctions jQuery jusqu’à ce que toutes les images soient complètement chargées