Selon vos impératifs de webdesign sur votre site Divi, vous pouvez être amené à avoir besoin de faire apparaître le logo présent dans votre barre de navigation seulement après avoir fait défiler la page.
Voici donc quelques lignes de code qui vont vous permettre d’obtenir ce résultat, avec ou sans utilisation du Theme Builder.

Avant-propos

Notez que Divi propose déjà nativement une option permettant d’afficher le logo après avoir légèrement scrollé.
Le but de ce tutoriel est de vous expliquer comment obtenir le même rendu manuellement, avec des possibilités de personnalisation pour le type d’animation et son délai de déclenchement.

Pour rappel, l’option native de Divi est accessible via le personnaliseur de thème, dans En-tête et navigation -> Barre de menu primaire -> Cacher l’image du logo.

Aperçu du rendu

Voici des exemples d’apparition du logo au scroll en utilisant une translation verticale et une translation horizontale.

Méthode avec le menu traditionnel de Divi

Le principe

L’idée est d’attribuer en CSS un positionnement par défaut au logo.
Ensuite, avec JavaScript, nous allons venir ajouter ou retirer au logo une classe précisant un nouveau positionnement CSS, selon que le visiteur fasse défiler la page vers le haut ou le bas.

Le code JavaScript

Où placer ce code ?

Si vous souhaitez faire apparaitre le logo au scroll sur l’intégralité des pages de votre site, collez les lignes suivantes dans Divi -> Options du Thème -> L’intégration -> Ajouter ligne de code à la < head > de votre blog.

Si vous souhaitez appliquer cet effet sur une seule page, insérez-le alors dans un module Code.

Dans les deux cas, pensez à englober ces lignes de code entre des balises <script>.

Détaillons ce code

• Ligne 1 : on appelle la fonction .scroll qui précise que l’action va se dérouler lors du défilement de la fenêtre du navigateur
• Ligne 2 : on créé une variable scroll qui définit la distance de défilement depuis le haut de la fenêtre du navigateur
• Ligne 3 : on attribue une valeur conditionnelle à notre variable. Si celle-ci dépasse 500 px (modifiez selon vos besoins), alors…
• Ligne 4 : on ajoute la classe logo-visible
• Ligne 5 : si le taux de scroll est inférieur à la valeur indiquée, on retire la classe logo-visible

Le code CSS

Si vous ne savez pas où placer les lignes de CSS suivantes, je vous invite à lire mon article 7 manières d’ajouter des CSS à Divi.

Détaillons ce code

• Premier groupe de lignes :
  • on style l’élément #logo qui cible le logo présent dans la barre de menu de Divi.
  • dans cet exemple, j’ai appliqué une translation verticale de 200 px au logo. Mais vous pouvez faire de même avec une translation horizontale si vous le souhaitez. La valeur en pixels sera bien sûr à ajuster au cas par cas.
• Deuxième groupe de lignes :
  • on définit des règles pour la classe qui vient s’ajouter au logo lors du défilement.
  • on rétablit simplement la translation avec une valeur nulle.
• Troisième groupe de lignes :
  • pour les sélecteurs qui ciblent donc le logo lors de son état par défaut puis son état au scroll, on applique une transition afin que l’effet soit fluide.

Ces modifications s’appliquent à toutes les largeurs d’écrans.
Si vous souhaitez restreindre cet effet à la version desktop de votre site, ajoutez @media only screen and ( min-width: 981px ) { au début des CSS ci-dessus. Et n’oubliez pas l’accolade fermante } à la fin du code.

Méthode avec le Theme Builder de Divi

Avec JavaScript et CSS

Pour cet exemple, je pars du principe que vous avez créé votre barre de navigation comme vous le souhaitiez et que vous utilisez un module image pour insérer le logo de votre site.

La méthode est identique à celle que je viens de vous présenter.
Il vous suffit juste de baliser votre module image en lui ajoutant un identifiant CSS logo en allant dans les paramètres du module, dans Avancé -> ID et classes CSS -> ID CSS.

Avec les effets au scroll

Je vous ai récemment présenté la fonctionnalité de Divi permettant d’ajouter des effets à vos éléments lors du défilement de la page.
Il est donc possible d’utiliser cette option pour obtenir un résultat sensiblement identique.

Dans les paramètres de votre module Image, rendez-vous dans Avancé -> Scroll Effects et activez l’effet que vous souhaitez.
Précisez la valeur qui convient à votre logo dans le champ Mid Offset.

Très honnêtement, même après avoir testé un grand nombre de configurations, je n’ai pas réussi à modifier le délai d’apparition du logo en utilisant les effets au scroll de Divi.
C’est donc une solution fonctionnelle, mais il ne faut pas avoir d’exigences particulières quant au moment de l’affichage du logo.

Pour conclure

Vous savez désormais qu’afficher le logo de son site lors du défilement de la page se fait avec très peu d’efforts.
Plusieurs options s’offrent à vous pour obtenir ce rendu. En ce qui me concerne, je privilégie la solution JS + CSS qui est simple à mettre en œuvre et offre une grande latitude dans la personnalisation de l’effet.

Cet effet est utile car il permet d’éviter dans certains cas d’avoir le logo affiché deux fois sur la page ; si par exemple celui-ci est aussi présent dans le header.
À vous maintenant d’être créatif sur la manière dont vous allez faire apparaitre votre logo au scroll : translation, rotation, échelle, fondu… ou même un mix de ces options.

Partager