Sélectionner une page


Terminé? Super, maintenant il est temps pour certains jQuery.

Voici ce que nous faisons:

Au début, nous donnons notre premier élément de menu la classe ds-menu-actif. Cela équivaut à peu près au lien sur votre page d’accueil sur un site multi-pages qui est actif lorsque le site est ouvert.

Ensuite, nous créons une variable appelée scrollPos pour enregistrer la position verticale actuelle, que nous utiliserons plus tard dans un calcul.

Ensuite, nous disons pour chaque élément avec la classe section DS, créez une autre variable nommée top pos Nous pouvons donc cibler cette section lorsqu’elle est active.

Nous allons maintenant utiliser les deux variables que nous avons créées dans un calcul qui indique s’il s’agit d’une section avec la classe section DS est égal ou inférieur à 80 px du haut de la page, supprimez la classe ds-menu-actif à partir de l’élément précédemment sélectionné et ajoutez la classe ds-menu-actif à l’article actuel.

jQuery(function ($) {
    $('#main-header #top-menu li:first-child a, .et_slide_in_menu_container .et_mobile_menu li:first-child a').addClass('ds-menu-active')
    $(window).scroll(function () {
        var scrollPos = $(window).scrollTop();
        $('.ds-section').each(function (i) {
            var topPos = $(this).offset().top;
            if ((topPos - scrollPos) <= 80) {
                $('.ds-menu-active').removeClass('ds-menu-active')
                $('#main-header #top-menu a:not(li.centered-inline-logo-wrap a), .et_slide_in_menu_container .et_mobile_menu li a').eq(i).addClass('ds-menu-active')
            }
        })
    });
});

Nous devons ajouter ce code dans Divi, mais nous devons l’envelopper dans des balises de script pour que cela fonctionne. Copiez donc le code complet du commutateur ci-dessous et accédez à Divi> Options du thème> Intégration> Ajouter au Ajoutez du code à votre blog et collez-le.

Si vous avez un en-tête principal élevé, par ex. Par exemple, si vous utilisez le format d’en-tête centré, vous souhaiterez peut-être que vos liens changent un peu plus tôt. Si tel est le cas, augmentez simplement le 80 Valeur dans jQuery jusqu’à ce que les liens changent à l’endroit souhaité.





Source link

Recent Posts