Comment commencer à diviser la navigation vers le bas et la fixer en haut pendant le défilement

Dans le tutoriel Divi d’aujourd’hui, nous allons progressivement vous montrer comment naviguer régulièrement sur le site Web pendant le défilement et après avoir dépassé la hauteur de l’écran complet. Si vous suivez les étapes de cet article pour recréer la navigation fixe, vous verrez que la navigation apportera une interaction agréable à votre menu principal et à votre site Web. Nous allons d’abord créer une navigation verticale normale à l’écran. Cette navigation se déplace vers le bas de l’écran et non vers le Haut de la page. Une fois défilé, lorsque vous passez la hauteur du menu à l’écran, vous verrez que le menu change de position et sera placé en haut de la page. Une fois la navigation fixée, elle reste fixée sur le reste de la page. Mais une fois que vous retournez à la section héros, la navigation fonctionne à nouveau correctement et est placée au bas de la section héros.
Vous pouvez dire que cette page \
Ouvrez ou créez d’abord une page pour ajouter cet effet. Alors, ouvre.
Vous pouvez ajouter du Code à une page spécifique.
Ajouter le Code aux options du sujet; Allez au tableau de bord WordPress > Split > Theme Options > faites défiler l’onglet général et collez le code suivant dans le champ CSS personnalisé: # main header {
Position: absolue;
En haut: voiture élévatrice;
En bas: 0;
} Ajouter du code CSS à une seule page cette option peut être intéressante si vous voulez appliquer cette navigation fixe à une seule page plutôt qu’au reste du site. Par exemple, si vous n’utilisez que des titres de pleine largeur sur votre page d’accueil, vous pourriez avoir besoin de cette méthode. Ouvrez la page sur laquelle vous souhaitez ajouter une navigation stable au fur et à mesure que vous Défilez. Ensuite, vous verrez les symboles suivants dans le coin droit du générateur: Cliquez dessus et vous verrez un écran dans lequel vous pouvez changer la page entière. Ajoutez le code suivant à la boîte CSS personnalisée pour l’appliquer à cette page spécifique: \ # main header {
Position: absolue;
En haut: voiture élévatrice;
En bas: 0;
} Ajouter le Code jquery requis la prochaine étape que nous allons faire est d’ajouter le Code jquery à notre site WordPress. Ce code commencera à fonctionner au moment où vous défilerez. Nous pouvons ajouter du Code jquery de deux façons; Via les options de sujet ou les formulaires de code. Si vous souhaitez ajouter du Code à une seule page, vous pouvez utiliser le module de code en conjonction avec la troisième possibilité de code CSS mentionnée dans cet article.
Ajouter du Code jquery en utilisant les options de thème pour appliquer du Code à toutes les pages d’un site Web, vous pouvez ajouter du Code aux options de thème. Aller au tableau de bord WordPress > aller à Divi > aller aux options de thème > ouvrir l’onglet intégration > et coller le code suivant à \
Jquery (fonction ($)
$(fenêtre). BIND (‘Scroll’, Function () {
Var windowheight = $(fenêtre). Hauteur ();
Si ($)
Inde). Scrolltop () Ajouter du Code jquery à partir d’un formulaire de code si vous voulez ajouter du Code à une page spécifique, vous pouvez l’ajouter à partir d’un formulaire de code. Dans la section précédente, nous avons ajouté le code CSS, et vous devez sélectionner la dernière option. Retournez à la page et ajoutez une section standard en haut de la page. Dans la section normes, ajoutez un formulaire de code. En fait, vous pouvez placer cette section à votre endroit préféré, mais si vous voulez la trouver rapidement, nous vous recommandons de la placer en haut de la page. Ensuite, copiez et collez le code suivant dans la zone de contenu du formulaire de code: Jquery (fonction ($)
$(fenêtre). BIND (‘Scroll’, Function () {
Var windowheight = $(fenêtre). Hauteur ();
Si ($(fenêtre). Scrolltop () C’est tout! Le Code devrait maintenant fonctionner et vous pouvez modifier votre menu pour rendre votre site plus interactif.
Dans cet article, nous vous montrons comment créer une navigation fixe lors du défilement. Nous vous avons fourni plusieurs lignes de code CSS et plusieurs lignes de code jquery qui devraient être en mesure de le faire. Si vous suivez cet article étape par étape, vous devriez être en mesure d’obtenir le résultat final. Si vous avez des questions ou des suggestions concernant le prochain article; N’hésitez pas à commenter dans la section commentaires ci – dessous! Assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous ne manquiez pas de belles annonces, des conseils utiles ou des cadeaux Divi! Gros plan de denissize \/ shutterstock. Com