Sujet Précédent Sujet Suivant

Jquery : Changement de logo à la div X

Résolu/Fermé
borg80 - 7 sept. 2016 à 00:06
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 7 sept. 2016 à 16:22
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

Réponse 1 / 3
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 7/09/2016 à 03:09
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
Réponse 2 / 3
codeurh24 Messages postés 761 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
7 sept. 2016 à 02:34
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 ?
0
Réponse 3 / 3
borg80
7 sept. 2016 à 14:51
@ 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 :)!
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 7/09/2016 à 16:22
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
0

Discussions similaires

jquery: refresh element enfant après ajax
snipchain -
snipchain -

2 réponses
jQuery & Regex
ameb2908 -
Whismeril -

3 réponses
Redirection Jquery onclick
Vitaly58 -
Vitaly58 -

4 réponses
Refresh div
Utilisateur anonyme -
Utilisateur anonyme -

11 réponses
A quoi sert jquery.min.map?
le_joker_fou -
le_joker_fou -

4 réponses