Logo qui change au scroll
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:
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:
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:
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é !!
