jQuery Girl
  1. jQuery Girl
  3. La position d’arrière-plan initiale de la section parallaxe n’est pas cohérente avec le défilement de la page
Intereting Posts
console.log (résultat) renvoie . Comment puis-je obtenir result.name? Remplir automatiquement text_fields en fonction de l’élément sélectionné dans une autre collection_select dans Rails 3 Impossible de tracer deux diagrammes à l’aide de Highchart Utilisez jQuery pour supprimer une div sans enfants jquery delete tableau ligne Détruire ou recalculer le sélecteur CSS nth-child Exécuter la fonction juste après les modifications d’entrée Javascript: mettre à jour le contenu de l’étiquette lors de la saisie à l’intérieur d’une entrée parent avec Jquery Comment définir jquery-ui draggable revenir à true si, après une validation, je décide de déplacer l’élément en arrière? JQuery AJAX Consume Web Service SOAP jQuery Table sorter: arrêtez le sorting Mise à jour de JQuery – Obtenir l’erreur d’exécution Microsoft JScript: “jQuery” n’est pas défini Renvoie la valeur fractionnée si l’utilisateur a entré le chemin, sinon retourne vide Post modèle contenant le fichier HttpPostedFileBase avec quelques parameters utilisant form.serialize () dans mvc4 Rails: Formulaire distant dans un partiel: fonctionne une fois, pas deux fois

La position d’arrière-plan initiale de la section parallaxe n’est pas cohérente avec le défilement de la page

J’ai passé toute ma journée à essayer de créer une section Parallax qui fonctionne bien, peu importe où elle est placée sur la page, mais chaque modification apscope au code corrige un problème et en crée un autre. Voici mon code jusqu’à présent: 

(function( $ ) { "use ssortingct"; $('.parallax-section').each(function(){ var $el = $(this), speed = 0.4, elOffset = $el.offset().top; $(window).scroll(function() { var diff = $(window).scrollTop() - elOffset; var yPos = -(diff*speed); var coords = '50% '+ yPos + 'px'; $el.css({ backgroundPosition: coords }); }); }); }(jQuery));

Le Css: 

 .parallax-section{ background-position: 50% auto; background-repeat: no-repeat; background-attachment: fixed; background-image: url('http://lorempixel.com/1400/700') }

Voici un jsfiddle à ce sujet. Ici, vous verrez que la première section de parallaxe saute à la valeur de position de l’arrière-plan définie par le code ci-dessus, tandis que la seconde en bas de la page fonctionne correctement.

Je comprends que cela se produit car le code ci-dessus suppose que la valeur elOffset est supérieure à scrollTop, ce qui n’est pas le cas pour le premier.

Quelqu’un peut-il me dire comment définir la valeur initiale de la position d’arrière-plan, afin que ce saut ne se produise pas?

Merci.

Mise à jour: Ajout de contenu au-dessus de la première section de Parallax pour afficher le saut correctement.

Pour vous assurer qu’il n’y a pas de saut, il vous suffit de définir la valeur initiale de la même manière que vous l’avez définie pour le défilement.

La meilleure façon de procéder consiste à déplacer votre code dans une fonction, en dehors du gestionnaire de défilement, puis à appeler cette fonction dans le gestionnaire de défilement. Ensuite, vous pouvez également appeler cette fonction à tout autre moment .. comme au chargement de la page.

Voici ce que j’ai changé votre code pour: 

 (function ($) { "use ssortingct"; $('.parallax-section').each(function () { var $el = $(this); $(window).scroll(function () { updateBackground($el); }); updateBackground($el); }); }(jQuery)); var speed = 0.4; function updateBackground($el) { var diff = $(window).scrollTop() - $el.offset().top; var yPos = -(diff * speed); var coords = '50% ' + yPos + 'px'; $el.css({ backgroundPosition: coords }); }

Voir la démo

Fondamentalement, la fonction updateBackground() effectue tout le travail que faisait auparavant l’événement de défilement. Maintenant, au défilement, j’appelle simplement cette fonction et lui transmet les informations dont elle a besoin.

En-dessous, j’appelle aussi immédiatement la fonction, ainsi elle fonctionnera au chargement de la page.

(notez que j’ai également déplacé la variable speed dehors de .each() , à la fois de manière à ce qu’elle puisse être référencée plus facilement par la nouvelle fonction, et aussi parce qu’elle n’a pas besoin d’être configurée encore et encore. De même, il suffit de le déclarer une fois.)