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.

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.