Sticky Header - Tremblement lors de modification au scroll via javascript

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    Bonjour à tous, j'ai un souci probablement très bête...

    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 idée? Merci d'avance ! (script en dessous)

    <!-- Scroll sticky menu -->

    <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>
    Dernière édition par Fireblist à 24/06/2019, 13h18

  • #2
    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
    If anything can go wrong, it will...
    If I can help, I will ..https://conseilgouz.com

    Commentaire


    • #3
      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 !

      Commentaire


      • #4
        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é"
        Fireblist likes this.
        If anything can go wrong, it will...
        If I can help, I will ..https://conseilgouz.com

        Commentaire

        Annonce

        Réduire
        1 sur 2 < >

        C'est [Réglé] et on n'en parle plus ?

        A quoi ça sert ?
        La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

        Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

        Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
        Comment ajouter la mention [Réglé] à votre discussion ?
        1 - Aller sur votre discussion et éditer votre premier message :


        2 - Cliquer sur la liste déroulante Préfixe.

        3 - Choisir le préfixe [Réglé].


        4 - Et voilà… votre discussion est désormais identifiée comme réglée.

        2 sur 2 < >

        Assistance au forum - Outil de publication d'infos de votre site

        Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

        Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

        Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

        UTILISER À VOS PROPRES RISQUES :
        L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

        Problèmes connus :
        FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

        Installation :

        1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

        Archive zip : https://github.com/AFUJ/FPA/zipball/master

        2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

        3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

        4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

        5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

        6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
        et remplacer www. votresite .com par votre nom de domaine


        Exemples:
        Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
        Télécharger le script fpa-fr.php dans: /public_html/
        Pour executer le script: http://www..com/fpa-fr.php

        Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
        Télécharger le script fpa-fr.php dans: /public_html/cms/
        Pour executer le script: http://www..com/cms/fpa-fr.php

        En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

        Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
        Voir plus
        Voir moins

        Partenaire de l'association

        Réduire

        Hébergeur Web PlanetHoster
        Travaille ...
        X