11567 sujets

JavaScript, DOM et API Web HTML5

DocumentElement.scrollTop : comment mesurer en rem ?

Bonjour,

Bonne pratique à ma connaissance, je passe des px aux rem pour définir les marges principales et points de ruptures des media queries.

J'ai un vieux script JS qui marche très bien :

window.onscroll = function() {myFunction()};

function myFunction()
{
var x = document.body.scrollTop || document.documentElement.scrollTop;
var h = document.getElementById('panier').offsetHeight;
var b = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var a = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var w = document.body.scrollWidth || document.documentElement.scrollWidth;

b = b - 110;

if (x > 80 && h < b && w < a)
{
document.getElementById('panier').className = 'fixed';
}
else
{
document.getElementById('panier').className = '';
}     
}


Est-il possible de moderniser avec des rem au lieu de px ?

Merci d'avance de vos lumières.
Modérateur
Salut,

Ton script est fastidieux à lire. Des variables qui ne veulent pas dire grand chose. Ce n'est pas terrible. Scrolltop te reverra toujours en px. Puisque tu veux gérer les différentes résolutions écran, utilise window.addEventeListener('resize', ....) ou window.onresize = .....

En comprenant ton script (lu en z), j'ai l'impression qu'un position: sticky devrait faire l'affaire.
Modifié par Niuxe (08 Dec 2025 - 03:11)
Bonjour Niuxe,

C'est un vieux script, merci de ton suivi.

x > 80
Il s'agit effectivement d'un effet sticky sur une colonne à gauche (panier) dont le contenu est plus ou moins fourni.

h < b
Pas de blocage si le contenu est plus haut que la page car autrement le contenu en bas de colonne serait inaccessible.

w < a
Cela ne me revient pas mais il doit y avoir une raison...

En CSS position : sticky devrait être associé une container query sur la hauteur.
En unité vh, pas d'autre choix il me semble.
Mais vh n'est pas une unité relative comme rem...

Je ne vois pas comment resize peut m'aider.
Modérateur
boteha_2 a écrit :

Je ne vois pas comment resize peut m'aider.



window.addEventListener('resize', myFunction)

ou (anciennement)

window.onresize = function(){myFunction()}

Modifié par Niuxe (10 Dec 2025 - 17:23)
Bonjour Niuxe,

Merci de ton suivi mais je ne comprends toujours pas comment resize peut m'aider.

1) La question est mesurer en rem au lieu de px.

2) L'événement est le scroll, pas le resize.

Quelque chose doit m'échapper...
Modérateur
boteha_2 a écrit :
Bonjour Niuxe,

Merci de ton suivi mais je ne comprends toujours pas comment resize peut m'aider.

1) La question est mesurer en rem au lieu de px.

2) L'événement est le scroll, pas le resize.

Quelque chose doit m'échapper...


Quasiment toutes les données que le JS te renverra seront en px. Sauf, si tu vas chercher une propriété css spécifique (style inline) et avec ce type d'écriture comme cet exemple :

html & css: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p{
      padding-top: 2rem;
    }
  </style>
</head>
<body>
  <p style="padding-bottom: 3rem;">bonjour</p>
  <script src="app.js"></script>
</body>
</html>


js : 

(() => {
  const p = document.querySelector('p')
  const pt = window.getComputedStyle(p).getPropertyValue('padding-top')
  const pb = window.getComputedStyle(p).getPropertyValue('padding-bottom')
  const pb_bis = p.style.paddingBottom

  console.log(pb) // pixel
  console.log(pb_bis) // rem puisque le js va interpréter le style inline

  console.log(pt) // pixel
  console.log(p.offsetHeight) // pixel
  console.log(p.getBoundingClientRect()) // pixel
})()


boteha_2 a écrit :

Je ne vois pas comment resize peut m'aider.


Lors du redimensionnement de la fenêtre (mode mobile/tablette/fablette : portrait en paysage et inversement), il y aura un recalcule des données.
Modifié par Niuxe (11 Dec 2025 - 11:54)
Bonjour Niuxe,

Merci, je comprends mieux, y compris resize.

Je code cela et je reviens vers vous dans quelques jours.

boteha_2 a écrit :
En CSS position : sticky devrait être associé une container query sur la hauteur.
En unité vh, pas d'autre choix il me semble.
Mais vh n'est pas une unité relative comme rem...


Est-ce une bonne piste ?
container query sur la hauteur me semble être une bonne idée pour éviter un javascript.

Mais ensuite je ne vois pas comment m'en sortir sans vh pour le calcul de la hauteur de la page et vh n'est pas relatif aux paramètres du client, contrairement à rem.
Modifié par boteha_2 (11 Dec 2025 - 14:54)
Modérateur
Voilà un exemple :
html : 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <main>
    <section>
      <h1>contenu</h1>
    </section>
    <aside>
      <div class="bloc">
        <h2>bloc sticky</h2>
      </div>
    </aside>
  </main>
</body>
</html>


css (styles.css) : 

*{
  box-sizing: border-box;
}

html{
  font-size: 62.5%;

  body{
    margin: 0;
    font-family: sans-serif;
    min-height: 100vh;
    
    main{
      display: grid;
      min-height: 100vh;
      width: 80%;
      margin: 0 auto;
      grid-template-columns: 66% 33%;
      grid-column-gap:1%;

      section{
        height: 200rem;
        background-color: #e5e5f7;
        opacity: 0.8;
        background-image: linear-gradient(0deg, #e5e5f7 50%, #444cf7 50%);
        background-size: 10px 10px;
      }
      aside{
        background-color: darkblue;
        height: 75vh;
        margin-top: 5rem;

        .bloc{
          position: sticky;
          top: 0rem;
          height: 15rem;
          background-color: green;

          h2{
            margin-top: 0;
          }
        }
      }
    }
  }
}

Modifié par Niuxe (11 Dec 2025 - 18:32)
Hello Niuxe,

J'ai copié-collé ton code dans un codepen.

Très bien mais ce ne sont pas exactement les contraintes demandées.

Je reviens vers vous avec une variante dès que j'ai le temps.

Codepen en projet.
Modifié par boteha_2 (11 Dec 2025 - 23:05)
Bonjour,

J'ai un peu avancé sur le codepen avec container query mais sans arriver au résultat voulu.

Je n'ai jamais compris pourquoi container-type s'applique au parent du bloc à cibler mais il doit y avoir une raison.

nav prend la hauteur de son div enfant
Je mesure nav pour conditionner la position sticky de div mais cela ne fonctionne pas...
Modérateur
boteha_2 a écrit :

Je mesure nav pour conditionner la position sticky de div mais cela ne fonctionne pas...


Regarde le code que je t'ai partagé récemment. Smiley cligne Pourquoi ça fonctionne et pourquoi ton code ne fonctionne pas. J'ai mis des couleurs. Ce n'est pas pour rien.
Bonjour Niuxe,

Ton code est celui de ce codepen, pas de malentendu ?

Je vais regarder à tête réposée mais je ne vois pas comment tu t'en sors sans container query.
Modérateur
boteha_2 a écrit :
Bonjour Niuxe,

Ton code est celui de ce codepen, pas de malentendu ?

Je vais regarder à tête réposée mais je ne vois pas comment tu t'en sors sans container query.


inspecte le code
Bonjour Niuxe,

Je ne veux pas t'ennuyer avec un code CSS tordu alors que pour une fois la solution JS est simple et efficace mais ton code CSS ne produit pas l'effet attendu.

Le bloc sticky doit rester fixe une fois atteint son TOP.

Dans ton système, il est bloqué, puis entraîné par son parent.

En plus tu donnes une hauteur au bloc sticky alors que sa hauteur est inconnue, déterminée par le contenu.
Modifié par boteha_2 (16 Dec 2025 - 23:19)
Modérateur
Mon code css n'est pas tordu (loin de là). C'est un exemple (c'est le but) À toi de modifier afin que tu aies le comportement que tu souhaites.

J'ai mis des règles css complémentaires afin que tu comprennes le comportement de l'élément bloc (<div class="bloc">) . J'ai mis des couleurs pour que tu voies quel élément impacte l'élément bloc. Tu constateras que le sticky fonctionne très bien. Mais il est contraint par des règles css complémentaires.

Tu veux le faire en JS, vas-y. 99% que tu n'en aies pas besoin. Le script que tu as partagé est pour un contexte spécifique qui dans la majorité des cas est inutile. D'ailleurs, en lisant le code, il est très vieux. Il a été écrit à une époque où position sticky n'était pas implémenté dans les navigateur. Aussi, il n'est pas du tout performant. Il fait des calculs permanents au moindre scroll. Il suffit de faire un console.log pour s'en rendre compte.
Bonjour Niuxe,

Merci de ton suivi.

Quand je parle de code tordu je parle de mon code, pas du tien...

J'ai mis à jour le codepen avec ton code modifié.

Niuxe a écrit :
D'ailleurs, en lisant le code, il est très vieux. Il a été écrit à une époque où position sticky n'était pas implémenté dans les navigateur.


C'est exact.

Si on peut le remplacer par un CSS c'est génial.
Je m'y remets à tête reposée au plus vite.
Modérateur
Pour le coup, évite codepen. Reprend mon code et écris-le dans un index.html et styles.css.

Ensuite, avec ton navigateur favoris, inspecte afin que tu comprennes pourquoi le comportement de l'élément bloc agit de cette manière. Ensuite, modifies ou supprimes les contraintes (règles complémentaires en css)
Niuxe a écrit :
Pour le coup, évite codepen. Reprend mon code et écris-le dans un index.html et styles.css.


D'accord, je vais faire comme ça.

Je commence à capter ton système de tiroir.

Je vous tiens informés, encore merci pour le suivi.
Bonjour,

Dans un espace de test j'ai créé deux documents.

Bloc sticky moins haut que bloc principal.

Bloc sticky plus haut que bloc principal.

EDIT : Pour des raisons de sécurité j'ai désactivé les liens vers le site de test.
Si vous en avez besoin vous pouvez me les demander par message privé.
Mais tout est dans le code de Niuxe.

Dans les deux cas l'effet recherché est celui voulu, sans JS ni container query.

Merci Niuxe pour ce code si simple (et astucieux).

Reste à le transposer dans la vie réelle, cela va prendre un peu de temps.

Je vous tiens informés.
Modifié par boteha_2 (21 Dec 2025 - 14:10)
Prévenir un modérateur
Répondre au sujet
Aller à