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

[fcaldera]

prova a vedere se così va bene : http://codepen.io/fcalderan/pen/YwVxRg/?editors=010 (scrolla la finestra di output)


CSS

#sticky { 
  position: fixed;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  
  top: 0; 
  z-index: -1;
  opacity: 0;
  transition: opacity .5s, z-index 0s .5s;
  
  border: 5px dashed #79c;
  background: #f2f2f2;
  padding: 80px 40px;
  width: 250px; 
  
}


#sticky.fixed  { 
  transition: z-index 0s, opacity .5s 0s;
  z-index: 1;
  opacity: 1;
}


#sticky:before { content: "current scroll: "; }
#sticky:after  { content: "px"; }

Javascript

(function(d, pos) {
  
  var b   = d.body,
      de  = d.documentElement,
      top = b.scrollTop || de.scrollTop,
      el  = d.getElementById('sticky'),
      scrolling = false;
  
  
  var onScroll = function(callback) {
      if (scrolling) {
          callback();
          window.requestAnimationFrame(function() {
              onScroll(callback);
          });
      }   
  };
  
  var update = function() {
      top  = b.scrollTop || de.scrollTop;
      el.textContent = top;
      el.classList.toggle('fixed', top >= pos);
  }
  
  
  document.addEventListener('scroll', function() {
      var intv, idle = !scrolling;
    
      scrolling = true;
      if (idle) {
          onScroll(update);
      }
    
      clearInterval(intv);
      intv = window.setTimeout(function() {
          scrolling = false; 
      }, 250);        
  });
  
}(document, 500));