TUTORIEL WORDPRESS
Comme vous le voyez sur la vidéo ci-dessus, les boutons de partage sociaux du bas de l’écran disparaissent lorsque l’on scroll vers le bas et apparaissent lorsque l’on scroll vers le haut.
Pour ce tuto vous aurez besoin de:
Méthodologie
Le principe que l’on va utiliser est le suivant:
Un script va scruter les évènements de scrolling de la page et en fonction du sens de scrolling va permuter des une classe CSS aux boutons. Deux classes seront nécessaires pour cela. La première aura pour fonction de rendre les boutons visibles et la seconde de la masquer. Pour ce faire nous allons changer la position des éléments de manière à soit les afficher en dehors de la zone de l’écran, soit à leur position sur l’écran. Ainsi nous pourrons les afficher et les masquer à l’envie.
1 - Création de la barre de boutons
Pour la barre de boutons des réseaux sociaux, je crée une section dans le footer de mon site. 5 colonnes et dans chacune des colonnes j’insère une icône. Bouton What’sApp, facebook, Instagram, twitter et partage social (que nous verrons dans un autre tuto). Sous l’onglet Responsive, je masque les icônes sur Ordinateur et Tablette. Je ne veux avoir ce comportement que sur Smartphone.
2 - Classe CSS personnalisée
Je vais maintenant préparer chaque bouton. La première opération est d’affecter une classe CSS à chacun des boutons. Cette classe doit être identique. Je l’appelle site-nav
Dans la section CSS personnalisé de chaque icône, j’affecte alors trois classes.
1 – site-nav pour avoir un index-z élevé pour que l’icône soit en avant plan de tout.
2 – site-nav.is -hidden qui permettra de cacher l’icône au scroll vers le haut. Pour ce faire nous déplacerons l’icône sur l’axe des Y de 500%. Elle s’affichera alors en dehors de l’écran vers le bas et sera donc ainsi masquée.
3 – site-nav.is-visible qui rendra l’icône visible lorsque l’on scrollera vers le bas. translateY(0) remettra l’icône à sa position initiale. La propriété transition ajoute un effet de décalage à ces changements de positions.
3 - JQuery
Maintenant que l’on a préparé les icônes, qu’on leur a affecté une classe identique (site_nav) avec deux états différents (is-hidden et is-visible), il ne reste plus qu’à créer le code JQuery qui servira à activer notre mécanisme.
L’objet de ce code est de calculer le décalage de la position du scroll de tous les éléments possédant la classe site-nav. En l’occurence nos icônes.
let scrollPos = 0;
const nav = document.querySelectorAll('.site-nav');
La fonction checkPosition a pour but de récupérer le scroll courant et de le comparer au scroll précédent (qui a été préalablement sauvegardé dans la variable windowY pour déterminer le sens du scroll. Si l’on scroll vers le haut (windowY < scrollPos) alors on attache la classe CSS is-visible aux icônes et on leur enlève la classe is-hidden, ce qui a pour objet de les rendre visibles.
Si l’on scroll vers le bas, il faut les masquer, ce qui est fait par le bloc suivant SCROLL-DOWN. L’opération est inversée, on leur ajoute la classe is-hidden et on leur enlève la classe is-visible. L’icone se retrouve alors masquée car sa position se situe maintenant 500%plus bas sur l’écran. Elle est masquée.
function checkPosition() {
let windowY = window.scrollY;
if (windowY < scrollPos) {
// Scrolling UP
nav.forEach(function(navItem) {
navItem.classList.add('is-visible');
navItem.classList.remove('is-hidden');
});
} else {
// Scrolling DOWN
nav.forEach(function(navItem) {
navItem.classList.add('is-hidden');
navItem.classList.remove('is-visible');
});
}
scrollPos = windowY;
}
La dernière ligne permet de mémoriser la position courante pour qu’elle serve de référence aux tests suivants de scroll.
Ce code est suffisant pour que notre système fonctionne. Il faut cependant le perfectionner un peu de manière à éviter d’avoir trop de calculs inutiles. C’est le but de la fonction debounce. Elle ne va tester la position du Scroll de la fenêtre qu’après avoir attendu 10 millisecondes à partir de la détection d’un mouvement de scroll. Cela suffit à limiter les apparitions / Disparitions intempestives des icônes.
function debounce(func, wait = 10, immediate = true) {
let timeout;
return function() {
let context = this, args = arguments;
let later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
Enfin la function est implémentée. Elle sera appelée à chaque évènement scroll de la fenêtre d’affichage.
window.addEventListener('scroll', debounce(checkPosition));
Le code JQUERY COMPLET
let scrollPos = 0;
const nav = document.querySelectorAll('.site-nav');
function checkPosition() {
let windowY = window.scrollY;
if (windowY < scrollPos) {
// Scrolling UP
nav.forEach(function(navItem) {
navItem.classList.add('is-visible');
navItem.classList.remove('is-hidden');
});
} else {
// Scrolling DOWN
nav.forEach(function(navItem) {
navItem.classList.add('is-hidden');
navItem.classList.remove('is-visible');
});
}
scrollPos = windowY;
}
function debounce(func, wait = 10, immediate = true) {
let timeout;
return function() {
let context = this, args = arguments;
let later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
window.addEventListener('scroll', debounce(checkPosition));
Pour conclure
Développer son Site internet avec Elementor permet d’aller bien plus loin avec WordPress. Combiner le Jquery, les classes CSS personnalisées avec les puissantes fonctions du Site Builder ouvrent de nouvelles perspectives aux créateurs, aux Webmaster et aux WebDesigner. Voilà, c’était un tutoriel CARBONNEL MEDIA pour WordPress et Elementor.
Découvrez le résultat ici : https://www.carbonnel-media.com
N’hésitez pas à commenter cet article.
A bientôt.
Pierre Carbonnel