Sticky Header - Tremblement lors de modification au scroll via javascript

**pmleconte** · 23/06/2019, 11h01

Bonjour,

Personnellement, je n'utilise pas

Code:

if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {

En cherchant un peu, on trouve quelques messages sur sujet. Par exemple : https://stackoverflow.com/questions/...hrome#33462363

Sur un de mes modules, j'ai le code suivant :

Code:

        window.onscroll = function() {fn_sticky()};
        var navbar = document.getElementById("cg_navbar");
        var sticky = navbar.offsetTop+60;
        function fn_sticky() {
            if (window.pageYOffset >= sticky) {
                navbar.classList.add("cg_sticky")
            } else {
                navbar.classList.remove("cg_sticky");
            }
        }

Pour simplifier le code, j'utilise un classe .sticky que j'ajoute ou supprime aux objets à rendre "collants".

Dans mon cas, je teste ma barre de navigation (getElementById), mais cela doit pouvoir s'adapter à votre cas.

Pascal

**Fireblist** · 24/06/2019, 09h30

Merci beaucoup pmleconte de ta réponse ! Je vais me pencher sur ton code au calme pour le comprendre, et l'utiliser en priorité la prochaine fois afin d'avoir plusieurs cordes à mon arc.

J'ai réglé le problème grâce à une intervention d'une autre personne sur le forum de Developpez.net, et j'ai optimisé un peu le tout au passage sur ses conseils en utilisant un ajout / suppression de classe sur l'élément englobant pour que le script soit plus lisible.

Le souci venait au final de la position sticky elle-même sur ".overlayShadowTop", qui, une fois passée en fixe, ne posait plus de problème. Il faudra par contre que je me penche mieux sur la documentation de la position sticky afin de comprendre exactement ce qu'il se passait.

Pour info, voici donc la résolution du problème même :

Avant

Code:

 
 .overlayShadowTop {     background-color: rgba(0,0,0,0.5);     position: sticky; ...

Après

Code:

 
 .overlayShadowTop {     background-color: rgba(0,0,0,0.5);     position: fixed; ...

Et les modifications (sans conséquences sur le problème) qui ont été faites entre temps sur le script pour s'y retrouver :

Script : Ajout / retrait de la classe "stickyScrolled"

Code:

    <script>


        window.onscroll = function() {scrollFunction()};

        function scrollFunction() {
          if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            document.getElementsByClassName('overlayShadowTop')[0].classList.add('stickyScrolled');
          } else {
            document.getElementsByClassName('overlayShadowTop')[0].classList.remove('stickyScrolled');
          }
        }

    </script>

CSS de la classe ajoutée / retirée par le script

Code:

.overlayShadowTop.stickyScrolled{
    background-color:#FFF;
}

.overlayShadowTop.changesOnHoverMenu.stickyScrolled{
    background-color:#FFF;
}

.stickyScrolled .blocMenuDemarche{
    z-index:3;
    margin-top:-112px;
}

.stickyScrolled .modLogoTitreTop h1 a{
    color:#000;
}

.stickyScrolled .modLogoTitreTop h1 a strong{
    color:#000;
}


.stickyScrolled .headerPartAbsolute{
    text-align:left;
}


.stickyScrolled .modLogoTitreTop h1 strong{
    font-size:34px;
    line-height:2px;
}


.stickyScrolled .modLogoTitreTop h1{
    font-size:18px;
    line-height:16px;
}


.stickyScrolled .modLogoTitreTop img{
    margin-top:4px;
    height:50px;
}

.stickyScrolled .bgColorMainMenu{
    margin-top:-8px;
}

Le résultat : https://maule.synapseweb.fr

Merci encore !

**pmleconte** · 24/06/2019, 09h37

Merci pour ce complément d'informations et la solution que vous proposez (avec sa simplification).

J'aime bien l'effet que vous avez mis à votre entête.

Bonne continuation,

Pascal

PS: pensez à mettre cette discussion sur "Réglé"

Sticky Header - Tremblement lors de modification au scroll via javascript

[RÉGLÉ] Sticky Header - Tremblement lors de modification au scroll via javascript

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association