Un'esempio (fatto abbastanza in fretta) che fa decoupling tra evento di scroll e controllo dello scrolltop corrente attraverso l'uso di requestAnimationFrame:
http://codepen.io/fcalderan/full/YwVxRg/
(testato solo su chrome)
Javascript:
codice:
(function(d, limit) {
var b = d.body,
de = d.documentElement,
top = b.scrollTop || de.scrollTop,
el = d.getElementById('sticky'),
scrolling = false;
var checkScroll = function() {
top = b.scrollTop || de.scrollTop;
el.textContent = top;
el.classList.toggle('fixed', top >= limit);
if (scrolling) {
window.requestAnimationFrame(checkScroll);
}
};
document.addEventListener('scroll', function() {
if (!scrolling) {
scrolling = true;
checkScroll();
}
scrolling = true;
window.setTimeout(function() { scrolling = false }, 250);
});
}(document, 400));