Discussion :

[Ushuango]

Bnojour,


et bonne année 2021 pour commencer !!

Alors voilà:
j'ai un header avec une barre de navigation. header en position sticky !
Puis des sections avec des ancres dans le reste de la page.

Ma section a une hauteur de 190px et pour faire en sorte qu'une partie des ancres ne se retrouve pas sous le header en CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
:target::before {
    content: "";
    display: block;
    height: 190px;
    margin-top: -190px;
}

Mais dans le cas où je ne connais pas la hauteur de mon header ???
Je sais récupérer la hauteur en Javascript une fois la page affichée, mais je ne peux pas modifier un pseudo-élément avec JS !!
Du coup, je ne peux pas utiliser cette méthode CSS pour les ancres.

Il faut donc faire une méthode en javascript: scroller en javascript?
Ou bien existe t-il un moyen avec du css que l'on pourrait modifier en javascript ?

[NoSmoking]

Bonjour,
effectivement, lorsque l'on ne connaît pas ou que l'on ne maîtrise pas la hauteur il faut avoir recours au CSS dynamique.

Pour ce faire tu crées toi même ta balise <style> personnalisée que tu renseignes avec les propriétés/valeurs calculées les autres pouvant restées dans ton CSS.

Tu peux créer une fonction comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Initialisation après chargement du DOM
document.addEventListener("DOMContentLoaded", function() {
  // ajout dynamique height et margin-top
  function setCustomStyle() {
    let oStyle = document.getElementById("custom-style");
    if (!oStyle) {
      const oHead = document.querySelector("head");
      oStyle = document.createElement("STYLE");
      oStyle.id = "custom-style";
      oHead.append(oStyle);
    }
    const oSticky = document.querySelector("header");  // ou autre suivant le HTML
    // récup. dimension en cause
    const h = oSticky.offsetHeight + "px";
    // insertion/ajout des propriétés/valeurs calculées
    oStyle.textContent = ":target::before{height:" + h + ";margin-top:-" + h + "}";
  }
  // il faut prévoir un redimensionnement éventuel
  window.addEventListener("resize", function () {
    setCustomStyle();
  });
  setCustomStyle();
});

Tu peux placer ce script où tu veux, il est à noter qu'il faut prévoir le recalcul en cas de modification de la taille de la fenêtre, ton header pouvant être impacté.

[Ushuango]

Bonsoir,

La réponse est "parfaite" !
je me posais justement une autre question: et si dès fois l'utilisateur redimensionne lui-même la fenêtre
et que la barre de navigation se glisse sous le logo ? y-a-t'il un moyen de détecter un redimensionnement ?

Donc la réponse est : l'évènement resize !
je découvre au passage l'évènement DOMContentLoaded .

Mais des questions:
- le style qu'on applique se trouve dans la balise head, à la fin: il s'applique en dernier
donc si j'avais déjà du :target::before dans mon fichier CSS, le style appliqué devient prioritaire ?

- pourquoi setCustomStyle() est appelée à la fin ?

P.S: tu n'aurais pas oublié des trucs dans le style du genre:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
display: block;
content: "";

[NoSmoking]

- le style qu'on applique se trouve dans la balise head, à la fin: il s'applique en dernier
donc si j'avais déjà du :target::before dans mon fichier CSS, le style appliqué devient prioritaire ?

oui les dernières règles lues écrasent les précédentes.

- pourquoi setCustomStyle() est appelée à la fin ?

pour une initialisation au chargement de la page sans cela ce sont les règles initiales, si existes, qui seraient appliquées.

P.S: tu n'aurais pas oublié des trucs dans le style du genre:
...

Non car comme dit :

tu renseignes avec les propriétés/valeurs calculées les autres pouvant restées dans ton CSS.

tu peux bien évidement décider de reprendre toutes les déclarations même les invariables.

[Ushuango]

ah oui, moi j'avais enlevé tous le style :target ...!

et pour le setCustomStyle() , je n'ai pas de styles au départ donc effectivement je ne voyais pas d'effets significatifs lorsque je l'enlevais.

Je n'ai pas encore l'habitude de penser CSS: on ne change pas les styles mais on peut les écraser !

(Encore) Merci,

Laurent.