Jquery : Changement de logo à la div X

[Résolu/Fermé]
Signaler
-
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
Bonjour à tous!

Voila, je suis en train d'apprendre le jquery, et j'essaye de faire quelque chose d'assez sympa avec mon logo.

En effet, mon site est découpé en plusieurs sections ayant toutes une couleur distincte. Je souhaite donc que mon logo change de couleur en fonction de la section dans laquelle je me trouve. Ou plutôt : changer la source du logo en fonction de la section. Je suis sûr que vous allez parfaitement comprendre ce que j'essaye de faire... en vain. Après moult essais, je me tourne vers vous... désespéré :/

Si vous avez, ne serai-ce que l'ombre d'une piste à me donner, je suis preneur ^^


var logo = $("#sectra1_slidewebdesign").offset().top - 100;
var $nikka = $(window).scroll(function(){
if ( $nikka.scrollTop() > $('#sectra1_slidewebdesign')) {
$('#logo').attr('src','../imgs/logo/logo.png');
}else{
$('#logo').attr('src','../imgs/logo/logo-01.png');
}


$('#sectra1_slidewebdesign') est l'ID qui introduit la section 2. C'est donc à partir de cette ID que je souhaite effectuer mon changement de source.

Je vois que vous êtes en train de vous dire : "mais... mais... Il nous a fait quoi là?". Ne soyez pas trop durs, je débute et j'y met tout mon coeur (et mon cerveau aussi).

Merci pour ceux qui pourront m'aider dans ma quête du savoir jquerryen :)!


3 réponses

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
681
Salut

si tu as ce code pour afficher l'image

<img id ="logo" src="../imgs/logo/logo.png>


et que ta div a bien l'id "sectra1_slidewebdesign"
Alors le code çi dessous va marcher

$(document).ready(function() {

//defini la position y de la div sectra dans la variable postion
var position = $('#sectra1_slidewebdesign').offset().top;

$(window).scroll(function(){

//si le scroll est supérieur ou égal a position changement img
if ( $(window).scrollTop() >= position)
{ 
$('#logo').attr('src','../imgs/logo/logo.png')
}

//si le scroll est inférieur a position retour img de base
if ( $(window).scrollTop() < position)
{ 
$('#logo').attr('src','../imgs/logo/logo-01.png')
}

})
})


tu peux faire plusieurs var de positions avec offset().top suivant les differentes ID de section et dans la function $(window).scroll(function() faire des if pour chaque variable de positions avec if ((A<B) && (A>C)) {...}

voila

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42674 internautes nous ont dit merci ce mois-ci

Messages postés
760
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018
116
Bonsoir.
Peux tu montrer le code source entier de la page ?

Si je comprend bien tu utilise des ancres dans ton menu,
et il y a quelque part lorsque tu scroll un logo qui te suit ?
@ animostab

Waaaaaaah ! C'était plutôt simple en fait.

En tout cas merci. Je comprend bien mieux maintenant. Il ne me reste plus qu'a me faire plaisir à présent.

Un très grand MERCI de ma part :)!
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
681
pas de quoi en effet c'est simple, tu avais un peu tout mélangé dans ton code :) (var $nikka = .....) n'avait rien a faire la