Visualizzare div fixed dopo che window.pageYOffset assume un certo valore

[fcaldera]

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:

(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));