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.