NB : Faire une sauvegarde de votre thème, de votre fichier et/ou votre base de données avant d’ajouter ces fonctions tutoriels.

Paramétrer des anchors - Entête en position sticky ou fixed
Intermédiaire

---- Cet article a été modifié : 31 mai 2022

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 arriver plus haut que le titre finalement.

Paramétrer des anchors – Entête sticky ou fixed

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à 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.

Paramétrer des anchors – Entête sticky ou fixed -Avec le code

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;}

Leave a Reply

Votre adresse e-mail ne sera pas publiée.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>