Pseudo-parallax et lag au scroll down
Bonjour,
J'ai un header contenant un menu et une div juste en-dessous contenant une image.
Les particularités sont que le menu du header devient "sticky" après un scroll down (le menu devient fix et colle au haut de l'écran) et que la div en dessous subit une sorte de parallaxe.
Par parallaxe, j'entends que quand on scroll down avec la souris, la div monte plus vite que le header qui la précède (c'est l'effet recherché en tous cas).
Pour le sticky menu, pas de souci.
Er l'effet de pseudo parallaxe (la div qui monte plus vite que le header), ça fonctionne aussi mais à un détail près:
Quand on arrive au bout de la page et qu'on continue à scroller vers le bas (ou que le scroll termine sa course), la div se met à trembler verticalement.
De toute évidence, en bout de page, le script essaye toujours de faire monter la div et un coup sur deux, se rend compte qu'il est en bas de page et s'arrette. Cela donne cet effet de tremblement/lag très gra.
Commet pourrais-je faire pour l'éviter ?
Voici un exemple live simplifié pour illustrer le problème (j'ai volontairement exagéré le mouvement vers le haut de la div pour que l'effet de tremblement en fin de page soit évident):
https://jsfiddle.net/v6g43mkL/1/
Voici le code:
HTML:
Code:
1
2
3
4
5
6
7
8
9
10
| <header>
<div class="void"></div>
<nav class="menu">
</nav>
</header>
<div class="parallaxed">
<!-- Picture displayed twice for the example only -->
<!-- to be sure everyone gets scollable page-->
<img src="https://farm8.staticflickr.com/7632/16990947835_3894284fd8_b.jpg">
</div> |
CSS:
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
|
body{
width:100%;
height:100%;
margin:0px;
padding:0px;
background: #ccc;
}
header{
position:relative;
width:100%;
background: #fff;
z-index:1;
height:146px;
}
.void{
position:relative;
width:100%;
height:100px;
}
.menu{
position:relative;
width:100%;
height:54px;
background:#aaa;
}
.fixed{
position: fixed;
left:0px;
top: 0px;
}
img{
width:100%
} |
jQuery:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| // Sticky header menu
$(window).scroll(function() {
if ($(document).scrollTop() > 92){
if (!$('.fixed').length){$('.menu').addClass('fixed');}
}
else {
if ($('.fixed').length){$('.menu').removeClass('fixed');}
}
});
// Parallax of page on scroll
var iCurScrollPos = 0;
$(window).scroll(function () {
iCurScrollPos = $(this).scrollTop();
$('.parallaxed').css('margin-top',-iCurScrollPos*1.2+'px')
}); |
Bien entendu, pour voir l'effet de pseudo-parallaxe et pour générer le problème, il faut pouvoir scroller et donc faire en sorte que votre la hauteur de votre browser soit assez petite pour que le scroll soit possible ;-)
Merci pour votre aide.
