[RÉGLÉ] Changement de couleur de fond suivant position

[reivilo78]

Bonjour,

je suis occupé de refaire un de mes sites perso, et je souhaite avoir un changement de couleur du fond à un endroit de ma page en descendant.
En 2018 j'avais ouvert un post sur ce forum et daneel et lomart m'avait bien aider pour faire fonctionner cette idée, voir ce lien

Aujourd'hui j'essaye d'adapter ceci sur mon site, mais je dois louper quelque chose, et après 4h dessus, je commence à devenir zinzin

Le site est ici
En bas du site, au niveau de "Magasin de luminaires Belgique" je souhaiterai que cela passe en blanc avec un léger effet de transition.
J'ai pour cela installé LM-Custom

Dans Code CSS je mets ceci :

.bg-white{background:#fff}
#section-id-1532270821591{transition: background 0.5s ease-in;}

Dans Code JS je mets ceci : (mais comment faire pour connaître la hauteur en pixel depuis le haut de page ?)

jQuery(document).ready(function($) {
$(window).scroll(function(){
if($(document).scrollTop() >=7000)
$("#section-id-1532270821591").addClass("bg-white");
else
$("#section-id-1532270821591").removeClass("bg-white");
});
});

Avec examiner sur firefox j'ai regardé le nombre de pixels par section, j'arrive à 7047, mais est-ce bien ainsi que l'on mesure ?
J'ai testé en mettant 1000 de plus à chaque fois, et jamais je n'ai d'effets, donc je suppose que quelque part je dois faire une erreur dans mon code

Merci d'avance pour votre aide

[lomart]

Bonsoir,

C'est la position en pixels

J'ai repensé au souci de la taille qui varie suivant le type d'écran. Un moyen est de détecter qu'un bloc est en partie visible à l'écran.
C'est possible avec LM-Custom, mais comme le code est spécifique à un article, il est plus facile de définir les règles au début avec UP.
Le shortcode serait

{up addscript | jquery}

function styleIsVisible(element, selector, classname)
{
    var TV= $(window).scrollTop(); /* TopView : haut de la partie visible */
    var BV= TV + $(window).height(); /* BottomView : bas de la partie visible */
    var TE= $(element).offset().top; /* TopElement : haut de l'élément */
    var BE= TE + $(element).height(); /* BottomElement : bas de l'élément */
    if (((TE>BV) && (BE>BV)) || ((TE<TV) && (BE<TV))) {
       $(selector).removeClass(classname);
    }else{
        $(selector).addClass(classname);
    }
}
$(window).scroll(function(){
[COLOR=#c0392b]styleIsVisible("#section-id-1530786176212","body","bg-bleuPale");
   styleIsVisible("#section-id-1532270821591","body","bg-jauneClair t-red");[/COLOR]
});

{/up addscript}

Seule la partie en rouge est à modifier.
On met une ligne par bloc à personnaliser.
La fonction styleIsVisible attend 3 paramètres :
1 : le sélecteur du bloc dont une partie doit être visible
2 : le sélecteur du bloc sur lequel sera appliqué la classe
3 : la ou les classes à appliquer

J'utilise des classes de base de UP, mais il est possible de définir et d'utiliser les siennes

Attention : les éditeurs wysiwyg ont la fâcheuse habitude de convertir les caractères <>& en entité HTML. Ce qui met le bazar dans le code final.
Donc, utilisez uniquement un éditeur en mode code.
La prochaine version de UP (qui doit arriver assez vite) corrigera ce souci. En cas d'urgence, je peux vous envoyer l'action corrigée

[reivilo78]

Bonjour lomart,

merci pour la réponse, je vais approfondir la variation de taille pour écran avec vos explications.
Pour ce qui est de mon site où j'ai mon problème actuel, mon code est correct et c'est la position en pixels qui me pose problème, c'est bien ça ?
S'il s'agit d'un problème de pixels, ma question peut paraître bête, mais comment fait-on pour connaître la hauteur qui sépare le haut de ma page de ma section-id-1532270821591 ?

[lomart]

Bonjour,

Colle ce script dans ton article.

function action(e){
    alert("position souris : \n X=" + e.pageX + "px    Y=" + e.pageY+ "px");
}
window.onclick = action;

Si on utilise UP : entourer avec {up addscript} ... {/up addscript}
sinon en mode code, on entoure avec <script>...</script>
On peut aussi coller le code dans la partie JS de LM-Custom

Ensuite, il suffit de cliquer pour avoir la position XY du clic dans la page entière

[reivilo78]

Re bonjour

je ne suis pas sur un article, mais j'en ai créé un pour tester.
Dès que je mets dans la partie code de l'article entouré de script, dès que j'enregistre il m'efface le code inséré.
Je vais sur LM_Custom, je mets le code comme on peut voir dans la pièce jointe, mais quand je clique ou que je reste cliqué sur un endroit de la page, rie ne se passe.
Je ne pense pas que ça change quelque chose, mais je suis sur un iMac aujourd'hui.

[lomart]

Il ne faut pas ajouter la balise script

[reivilo78]

J'avais également testé sans script, mais même résultat.
Aussi bien sur safari, firefox et chrome.

[lomart]

Est-il possible d'avoir une URL pour voir ?
Sur http://websseo.eu/Andeo/ le module n'a pas chergé le script

[reivilo78]

C'est bien sur cette url que j'ai insérer le code avec LM-Custom
J'ai trouvé une extension sur chrome (page ruler redux) qui permet de calculer la hauteur, et cela me donne 7100 pixels.
J'ai modifié et indiqué 7100, mais toujours pas de changement de couleur.
Si la mesure de hauteur ne fonctionne pas, et que le changement de couleur non plus, est-ce que je n'ai pas un problème avec LM-Custom ?

[lomart]

Si la mesure de hauteur ne fonctionne pas, et que le changement de couleur non plus, est-ce que je n'ai pas un problème avec LM-Custom ?

Je pense !
Vérifiez qu'il est publié sur toutes les pages.
Mettez-le à une position visible et ajouter du texte dans la partie HTML pour voir s'il s'affiche

[reivilo78]

Bon, votre module fonctionne très bien, c'est moi qui ne fonctionne pas bien
J'avais changé la page de destination, mais je n'avais pas changé la page dans "assignation des menus" dans LM-Custom

[lomart]

On a tous fait cette erreur. Il faudrait que la valeur par défaut soit sur "toutes les pages". Ceux qui veulent restreindre y pensent, les autres non.

Sinon, le script fonctionne ?

* correction : dans "assignation des menus" la valeur par défaut est bien sur "toutes les pages".

[reivilo78]

J'vais justement changer l'attribution des pages avant de mettre cette page en accueil, du coup effectivement ça fonctionne moins bien ;-)
Oui le script fonctionne également.