DocumentElement.scrollTop : comment mesurer en rem ?

(reprise du message précédent)

Bonjour,

Le code html / CSS de Niuxe convient très bien, encore merci.

J'ai quand même besoin de détecter si le visiteur a scrollé avec la molette, non pas pour effet sticky (réglé avec CSS) mais pour faire disparaître certains blocs.

Là je n'échappe pas à un JS, sauf erreur impossible de détecter le scroll avec CSS.

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

function myFunction()
{
var x = document.body.scrollTop || document.documentElement.scrollTop;

if (x > 0)
{
document.getElementById('panier').className = 'fixed';
}
else
{
document.getElementById('panier').className = '';
}     
}

Cela fonctionne, est-ce perfectible ou mieux possible en CSS ?

Cette variante fonctionne également, est-elle meilleure ?

window.addEventListener('scroll', function(e) {
 var x = this.scrollY;
	
if (x > 0)
{
document.getElementById('panier').className = 'fixed';
}
else
{
document.getElementById('panier').className = '';
}
	
}, false);

Modifié par boteha_2 (04 Jan 2026 - 20:21)

boteha_2 a écrit :
Là je n'échappe pas à un JS, sauf erreur impossible de détecter le scroll avec CSS.

Hello,

Ce n'est pas tout à fait exact : une spec existe mais elle ne fonctionne que sur Chromium actuellement. Il s'agit des "scroll-state queries" : https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Conditional_rules/Container_scroll-state_queries

Une démo (avec polyfill JS pour les navigateurs qui ne supportent pas encore la spec) : https://codepen.io/alsacreations/pen/PoMGKJR

Bonjour Raphaël,

Très intéressant.

Merci beaucoup.

Bonjour,

J'ai un peu modifié le codepen de Niuxe afin d'illustrer un petit problème que je rencontre avec sticky.

Le bloc de contenu (section) fait 400 vh de haut.

La hauteur du bloc sticky est définie par le contenu, en l'occurrence principalement la hauteur de h2, soit 100vh, il est plus haut que la fenêtre, on ne voit pas le bas.

La hauteur de aside n'est pas précisée, je suppose que c'est celle du bloc de contenu (section).

Quand je scrolle vers le bas, le bloc sticky prend sa position fixe, normal.
Mais pour voir le bas je suis obligé d'aller jusqu'à la fin du bloc de contenu.

N'y a-t-il pas moyen que le bloc sticky se libère dès que la molette atteint la fin de se bloc ?

J'espère être clair.
Modifié par boteha_2 (11 Jan 2026 - 19:44)

Bonjour,

Comme déjà indiqué plus haut :

J'ai quand même besoin de détecter si le visiteur a scrollé avec la molette, non pas pour effet sticky (réglé avec CSS) mais pour faire disparaître certains blocs.

Mais à une condition, c'est que le bloc soit moins haut que la fenêtre.
J'ai compris qu'il faut utiliser l'événement resize afin d'éviter que la hauteur soit calculée en permanence ce qui consomme des ressources.

J'ai essayé ce code qui ne fonctionne pas.
Si quelqu'un peut me dire où est l'erreur c'est sympa.

function resize () {
var h = document.getElementById('panier').offsetHeight;
var b = window.innerHeight;
};

window.onload = resize;
window.onresize = resize;

window.addEventListener('scroll', function e (b, h) {
var x = this.scrollY;
	
if (x > 0 && (h + 30) < b)
{
document.getElementById('panier').className = 'fixed';
}
else
{
document.getElementById('panier').className = '';
}
	
}, false);