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

[habbofilips]

salve a tutti sto provando a far visualizzare un certo div fixed dopo che window.pageYOffset assume il valore 500.
ho realizzato sta cosa qua ma non funziona.

$(document).ready(function() {
var top = window.pageYOffset;

if ( top > 499 ) {

document.getElementById("fixed").style.display = "block";
} else {

document.getElementById("fixed").style.display = "none";
}
} 

[fcaldera]

all'evento ready la variabile <top> sarà uguale a 0
e quello è l'unico momento in cui il codice viene eseguito

tu cosa ti aspetti che succeda?

[habbofilips]

vorrei che ci fosse tipo un controllo fisso sulla variabile top. come posso fare?
ho risolto con $(window).scroll(function() {}
ignoravo questa funzione
Grazie

[fcaldera]

puoi eseguire il controllo chiamando una funzione che verifica il valore di scroll corrente e poi richiama sé stessa con un requestAnimationFrame

oppure fare il controllo all'evento scroll, ma eviterei di fare eseguire qualcosa allo scroll, se non come ultima possibilità


ad ogni modo, per controllare lo scroll corrente

top = document.body.scrollTop || document.documentElement.scrollTop;

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

[habbofilips]

Grazie mille ho risolto con $(window).scroll(function() {}, ora però ho sempre un problema legato alla comparsa di questo div fixed , lo sto facendo apparire con FadeIn, ma appena appare per un istante si vede , diciamo con opacita 1.0, poi inizia da 0 fino ad arrivare a 1. Come posso risolvere?

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

[habbofilips]

si così dovrebbe andare grazie