Logo qui change au scroll

**eckso7** · 28/03/2016, 19h25

Bonjour,

J'utilise un script pour changer mon logo lorsque je scroll ma page. Le logo s'accorde avec la couleur du background suivant l'id de la section. Il est inclus dans ma navbar.

Mon soucis est que le logo change bien au fur et a mesure que je scroll ma page mais si je remonte tout en haut, sur l'id "first" le logo reste le logo de l'id "one". C'est a dire que logo.png ne saffiche pas et que logo1.png reste comme si c'etait la section avec l'id "one"

Voici mon script:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(window).on("scroll", function() {
 
   var currentPos = $(window).scrollTop();
 
   $('section').each(function() {
     var sectionLink = $(this);
 
     if (sectionLink.position().top <= currentPos && sectionLink.offset().top + sectionLink.height() > currentPos) {
       if (sectionLink.attr("id") == "first") {
         var src = "logo.png";
         $("#logo").attr("src", src);
       }
      else if (sectionLink.attr("id") == "one") {
         var src = "logo1.png";
         $("#logo").attr("src", src);
       }
    else if (sectionLink.attr("id") == "two") {
         var src = "logo2.png";
         $("#logo").attr("src", src);
       }
       else if (sectionLink.attr("id") == "showreel") {
         var src = "logo.png";
         $("#logo").attr("src", src);
       }
    else if (sectionLink.attr("id") == "last") {
         var src = "logo.png";
         $("#logo").attr("src", src);
       }
 
     }
   });
 
 });

Et ci-dessous le html de la navbar:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<nav id="topNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand page-scroll logo" href="#" id="logo"><img src="logo.png" alt="logo" /></a>
 
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse" id="bs-navbar">
 
                <ul class="nav navbar-nav navbar-right">
 
                    <li>
                        <a class="page-scroll" href="#one"><i class="icon-md ion-information-circled"></i><span>XXXXX</span></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#two"><i class="icon-md ion-settings"></i><span>XXXXX</span></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#showreel"><i class="icon-md ion-film-marker"></i><span></span></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#three"><i class="icon-md ion-images"></i><span>XXXXX</span></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#last"><i class="icon-md ion-chatbubble-working"></i><span>XXXXX</span></a>
                    </li>
 
                </ul>
            </div>
        </div>
    </nav>

Et la structure de la page en html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<header id="first"  style="margin-top:120px">
 
 
 </header>
 
 
 <section class="bg-primary container-fluid" id="one">
     <div class="container text-center">
         <div class="row">
 
 
         </div>
     </div>  
 </section>
 
 
 <section class="bg-secundary container-fluid" id="two">
     <div class="container">
 
 
     </div>
 </section>
 
 
 
 <section class="bg-primary" id="showreel">
     <div class="container text-center ">
 
     </div>
 
 </section>
 
 
 
<section id="three" class="no-padding bg-secundary container-fluid">
     <div class="container-fluid text-center">
         <div class="row no-gutter">
 
 
 
         </div>   
     </div>
 </section>
 
 
 <section class="bg-white container-fluid" id="last">
     <div class="container">
         <div class="row">
 
         </div>
 
         <div class="text-center text-muted purple" style="margin-top: 30px">
         </div>
 
     </div>
 </section>
 <footer id="footer">
     <div class="container-fluid">
     </div>
 </footer>

Peut-être un conflit avec un autre script dans ma page... ou une erreur dans ce script.... Merci d'avance pour votre aide car j'ai un peu tourné dans tous les sens l'histoire et je suis planté !!

**eckso7** · 31/03/2016, 23h45

Je viens d'identifier mon problème !!!

Le id "first" est dans le header qui n'est pas une balise "section" et donc le script ne le reconnait pas. Si je remplace la balise header par section, cela fonctionne. Le problème, c'est que cela me met le bordel dans ma page d'accueil, et de plus, je ne suis pas certain que de se passer d'une balise header soit l'ideal pour le SEO...
Mais le logo marche et le script s’exécute parfaitement.

J'ai essaye de rajouter header dans mon script mais ca ne marche pas et mon faible niveau en javacript me fait bloquer. Help SVP

**SpaceFrog** · 01/04/2016, 08h35

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $('section, header').each

?

**eckso7** · 01/04/2016, 10h59

Salut SpaceFrog,

Merci pour ta réponse mais ca ne marche pas. En tous cas, merci de te pencher sur mon soucis, car il n'y pas foule !!

J'ai essayé plusieurs variantes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $('section, header').each

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $('section', 'header').each

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$'section' 'header'.each

J'ai trouve un tricks en rajoutant une section vide dans mon header. Le validator HTML de W3c ne me l'annonce pas comme erreur mais c'est plus un tricks qu'une solution...