NB : Faire une sauvegarde de votre thème, de votre fichier et/ou votre base de données avant d’ajouter ces fonctions tutoriels.
Publié le : 31 mai 2022 - Modifié le : 1 octobre 2022
Temps de lecture : 3 minutes, 58 seconds - 349 mots
Partager la publication "Paramétrer des anchors – Entête en position sticky ou fixed"
Dans ce tutoriel nous allons voir comment paramétrer des anchors à une hauteur parfaite avec un entête qui a une position sticky ou fixed.
Nous avons trouvé plusieurs façons de faire notamment en CSS, mais nous avons créé une combinaison de codes trouvés en solution sur le web.
La première des choses c’est que votre entête qui est en position sticky ou fixed doit être mesurée en PX. Donc obtenez approximativement la hauteur de votre entête.
Résultat des anchors avec un entête fixé.
On voit bien dans notre exemple que le titre est pris dans le anchor. Logiquement comme mon ID est au-dessus, on aurait dû arriver plus haut que le titre finalement.
CSS pour votre entête sticky ou fixed
Il y a une valeur très importante à donner à votre CSS, c’est la valeur top:0. C’est cette valeur-là qui va donner la perfection de positionner correctement votre anchor au bon endroit.
Le problème avec les entêtes qui ont une position sticky ou fixed, c’est que le anchor dans la page ne tombe pas exactement là où il devrait puisque nous avons un décalage avec la hauteur en PX de l’entête.
Ici donc notre body HTML doit avoir la classe sticky, et le header doivent avoir ces valeurs, principalement la position et le top.
body.stiky header {
position: sticky;
background: #fff;
z-index: 3;
width: 100%;
left: 0;
top: 0;
}Ensuite nous avons trouvé ce magnifique code Javascript qui va régler votre problème de différence.
Ici dans notre exemple, la hauteur de notre header est 215 p.
OFFSET_HEIGHT_PX: 215,
Code javascript dans le footer
<script>
(function(document, history, location) {
var HISTORY_SUPPORT = !!(history && history.pushState);
var anchorScrolls = {
ANCHOR_REGEX: /^#[^ ]+$/,
OFFSET_HEIGHT_PX: 215,
/**
* Establish events, and fix initial scroll position if a hash is provided.
*/
init: function() {
this.scrollToCurrent();
$(window).on('hashchange', $.proxy(this, 'scrollToCurrent'));
$('body').on('click', 'a', $.proxy(this, 'delegateAnchors'));
},
/**
* Return the offset amount to deduct from the normal scroll position.
* Modify as appropriate to allow for dynamic calculations
*/
getFixedOffset: function() {
return this.OFFSET_HEIGHT_PX;
},
/**
* If the provided href is an anchor which resolves to an element on the
* page, scroll to it.
* @param {String} href
* @return {Boolean} - Was the href an anchor.
*/
scrollIfAnchor: function(href, pushToHistory) {
var match, anchorOffset;
if(!this.ANCHOR_REGEX.test(href)) {
return false;
}
match = document.getElementById(href.slice(1));
if(match) {
anchorOffset = $(match).offset().top - this.getFixedOffset();
$('html, body').animate({ scrollTop: anchorOffset});
// Add the state to history as-per normal anchor links
if(HISTORY_SUPPORT && pushToHistory) {
history.pushState({}, document.title, location.pathname + href);
}
}
return !!match;
},
/**
* Attempt to scroll to the current location's hash.
*/
scrollToCurrent: function(e) {
if(this.scrollIfAnchor(window.location.hash) && e) {
e.preventDefault();
}
},
/**
* If the click event's target was an anchor, fix the scroll position.
*/
delegateAnchors: function(e) {
var elem = e.target;
if(this.scrollIfAnchor(elem.getAttribute('href'), true)) {
e.preventDefault();
}
}
};
$(document).ready($.proxy(anchorScrolls, 'init'));
})(window.document, window.history, window.location);
</script>Résultat final des anchors avec notre solution
Nous voyons cette fois-ci que le anchor se place exactement ou se trouve mon ID, c’est-à-dire au-dessus du titre.
Effet slide directement sur le anchor
Si vous souhaitez ajouter un effet slide qui descend vers le ID de l’anchor.
html {scroll-behavior: smooth;}