Sticky Header - Tremblement lors de modification au scroll via javascript
Bonjour,
Je butte depuis deux jours sur un problème de changement de la mise en forme de mon header au scroll via Javascript, et après avoir fouillé sur tous les sites que je connais, je suis à court d'idée. Je ne suis pas très habitué de ce genre de demande sur forum, j'ai fouillé les autres sujets sans succès, j'ai lu les règles, mais s'il manque des informations ou qu'il y a déjà un sujet existant à côté duquel je suis passé, n'hésitez pas à me les demander ou à me rediriger.
Je travaille sur un site sur lequel je dois modifier la mise en forme du header au scroll. Je fais ça en javascript en vérifiant la distance avec le haut de l'écran et en ciblant les différents éléments à modifier avec querySelector. Si je suis au delà de 50px du haut du document, alors la mise en forme est appliquée, sinon, on revient à la mise en forme d'origine.
PROBLÈME : au scroll, dans la zone de changement du style du header, le site "tremble" car oscille rapidement entre les deux styles en continu rendant la transition insupportable.
Le site pour mieux visualiser : https://maule.synapseweb.fr/
Je suis passé par trois versions de cette condition JS avec le même souci. Le code actuel (la condition) est récupéré d'un site avec le même besoin mais moins de mise en forme dans lequel cela fonctionnait (http://albret.synapseweb.fr)
Est-ce que quelqu'un aurait une piste ? Merci d'avance ! (script utilisé en dessous)
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
61
|
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.querySelector('.blocMenuDemarche').style. zIndex='3';
document.querySelector('.modLogoTitreTop h1 a').style.color='#000';
document.querySelector('.modLogoTitreTop h1 a strong').style.color='#000';
document.querySelector('.blocMenuDemarche').style. marginTop='-112px';
document.querySelector('.headerPartAbsolute').styl e.textAlign='left';
document.querySelector('.modLogoTitreTop h1 strong').style.fontSize='34px';
document.querySelector('.modLogoTitreTop h1 strong').style.lineHeight='2px';
document.querySelector('.modLogoTitreTop h1').style.fontSize='18px';
document.querySelector('.modLogoTitreTop h1').style.lineHeight='16px';
document.querySelector('.modLogoTitreTop img').style.marginTop='4px';
document.querySelector('.modLogoTitreTop img').style.height='50px';
document.querySelector('.overlayShadowTop').style. backgroundColor='#FFF';
document.querySelector('.bgColorMainMenu').style.m arginTop='-8px';
} else {
document.querySelector('.blocMenuDemarche').style. zIndex='2';
document.querySelector('.blocMenuDemarche').style. marginTop='0px';
document.querySelector('.headerPartAbsolute').styl e.textAlign='center';
document.querySelector('.modLogoTitreTop h1 strong').style.fontSize='106px';
document.querySelector('.modLogoTitreTop h1 strong').style.lineHeight='51px';
document.querySelector('.modLogoTitreTop h1').style.fontSize='48px';
document.querySelector('.modLogoTitreTop h1').style.lineHeight='51px';
document.querySelector('.modLogoTitreTop img').style.marginTop='21px';
document.querySelector('.modLogoTitreTop img').style.height='auto';
document.querySelector('.overlayShadowTop').style. backgroundColor='rgba(0, 0, 0, 0.5)';
document.querySelector('.modLogoTitreTop h1 a').style.color='#FFF';
document.querySelector('.modLogoTitreTop h1 a strong').style.color='#FFF';
document.querySelector('.bgColorMainMenu').style.m arginTop='0px';
}
}
</script> |
